Javascript 翻卷时如何使用侧边栏位置

Javascript 翻卷时如何使用侧边栏位置,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

我有两列的布局。左列比侧边栏长得多。我只希望侧边栏的底部到达浏览器窗口的底部时才会粘住。因此,用户可以继续向下滚动左侧栏的内容,而右侧栏会粘住。。如何使用jquery和javascipt

$(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;
    });
}
})

当滚动到顶部时,我有这个错误

我想要这种款式


这不是您提供的代码的解决方案,但您可能需要查看是的,先生,我想要示例滚动该页面,您将看到黑色框粘在顶部。这个插件还可以做很多其他的事情,更具体的事情,所以也许你可以用它来解决你的问题。这仅仅是一个建议,人们通常不需要重新发明轮子:试试看,它可能会帮助你完成任务。请进一步解释?