Javascript 翻卷时如何使用侧边栏位置
我有两列的布局。左列比侧边栏长得多。我只希望侧边栏的底部到达浏览器窗口的底部时才会粘住。因此,用户可以继续向下滚动左侧栏的内容,而右侧栏会粘住。。如何使用jquery和javasciptJavascript 翻卷时如何使用侧边栏位置,javascript,jquery,css,Javascript,Jquery,Css,我有两列的布局。左列比侧边栏长得多。我只希望侧边栏的底部到达浏览器窗口的底部时才会粘住。因此,用户可以继续向下滚动左侧栏的内容,而右侧栏会粘住。。如何使用jquery和javascipt $(function() { var $window = $(window); var lastScrollTop = $window.scrollTop(); var wasScrollingDown = true; var $sidebar = $("#sidebar"); if ($sidebar.l
$(function() {
var $window = $(window);
var lastScrollTop = $window.scrollTop();
var wasScrollingDown = true;
var $sidebar = $("#sidebar");
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;
});
}
})
当滚动到顶部时,我有这个错误
我想要这种款式
这不是您提供的代码的解决方案,但您可能需要查看是的,先生,我想要示例滚动该页面,您将看到黑色框粘在顶部。这个插件还可以做很多其他的事情,更具体的事情,所以也许你可以用它来解决你的问题。这仅仅是一个建议,人们通常不需要重新发明轮子:试试看,它可能会帮助你完成任务。请进一步解释?