我有一个右侧栏,可以滚动到内容的末尾然后修复,但是偶尔向上滚动内容会消失。有没有办法让内容在向上滚动时“固定”到侧栏的顶部?我正在使用 Bootstrap 3 并在 Bootply ( http://www.bootply.com/mbjviJQBxv ) 中重新创建了它,这是我根据 Ryan Maxwell 改编的脚本:
$(function() {
var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;
var $sidebar = $(".rightSideBar");
if ($sidebar.length > 0) {
var initialSidebarTop = $sidebar.position().top;
$window.scroll(function(event) {
var windowHeight = $window.height();
var sidebarHeight = $sidebar.outerHeight();
var scrollTop = $window.scrollTop();
var scrollBottom = scrollTop + windowHeight;
var sidebarTop = $sidebar.position().top;
var sidebarBottom = sidebarTop + sidebarHeight;
var heightDelta = Math.abs(windowHeight - sidebarHeight);
var scrollDelta = lastScrollTop - scrollTop;
var isScrollingDown = (scrollTop > lastScrollTop);
var isWindowLarger = (windowHeight > sidebarHeight);
if ((isWindowLarger && scrollTop > initialSidebarTop) || (!isWindowLarger && scrollTop > initialSidebarTop + heightDelta)) {
$sidebar.addClass('fixed');
} else if (!isScrollingDown && scrollTop <= initialSidebarTop) {
$sidebar.removeClass('fixed');
}
var dragBottomDown = (sidebarBottom <= scrollBottom && isScrollingDown);
var dragTopUp = (sidebarTop >= scrollTop && !isScrollingDown);
if (dragBottomDown) {
if (isWindowLarger) {
$sidebar.css('top', 0);
} else {
$sidebar.css('top', -heightDelta);
}
} else if (dragTopUp) {
$sidebar.css('top', 0);
} else if ($sidebar.hasClass('fixed')) {
var currentTop = parseInt($sidebar.css('top'), 10);
var minTop = -heightDelta;
var scrolledTop = currentTop + scrollDelta;
var isPageAtBottom = (scrollTop + windowHeight >= $(document).height());
var newTop = (isPageAtBottom) ? minTop : scrolledTop;
$sidebar.css('top', newTop);
}
lastScrollTop = scrollTop;
wasScrollingDown = isScrollingDown;
});
}
我在 Stack Overflow 上搜索了解决方案,但找不到,我是脚本编写方面的新手,非常感谢您提供的任何帮助。
最佳答案
你可以只用 CSS 做到这一点
.rightSideBar{
position: fixed;
top: 0;
right: 0;
}
在 Bootply 中查看 http://www.bootply.com/1vcS8aufxj
希望对你有帮助
关于javascript - 滚动然后固定侧边栏内容在向上滚动时消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31152063/