粘性侧边栏滚动滞后和无限滚动答案

【问题标题】：Sticky sidebar scrolling lag and infinite scroll粘性侧边栏滚动滞后和无限滚动
【发布时间】：2014-08-14 16:28:52
【问题描述】：

我有一个随页面向下滚动的侧边栏。但是，侧边栏似乎落后于页面的滚动，例如。向下滚动并在几秒钟后显示侧边栏。此外，侧边栏将继续向下，使页面变长，并导致页脚变得不可访问。我需要做什么才能使侧边栏随着滚动而移动并且侧边栏停止在页脚处移动？这是我的 jQuery 代码：

            $(function() {

                var $sidebar   = $("aside"), 
                    $window    = $(window),
                    offset     = $sidebar.offset(),
                    topPadding = 50;

                $window.scroll(function() {
                    if ($window.scrollTop() > offset.top) {
                        $sidebar.stop().animate({
                            marginTop: $window.scrollTop() - offset.top + topPadding
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: 0
                        });
                    }
                });

            });

可以在http://meddiary.com/plans-pricing/ 看到一个示例。欢迎修复代码，但最好为我指出正确的方向。

【问题讨论】：

你考虑过使用 Bootstrap 吗？ getbootstrap.com/javascript/#affix
并非如此。我正在使用 jQuery，并且已经有很多函数在使用它。您认为有什么优势？
Twitter Bootstrap 是 jQuery 插件和 CSS 框架的集合。另一种方法是只使用 CSS。

标签： javascript jquery sticky

【解决方案1】：

尝试用纯 CSS 解决它：

.affix {
  position: fixed;
}

或者您可以使用现有的 jQuery 插件，如下所示： http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/

【讨论】：

我最初尝试过，但 position:fixed; 并没有真正将侧边栏保持在正确的水平位置。

【解决方案2】：

这就是我解决问题的方法：

            if ($(window).width() > 767) {

                var $sidebar   = $("aside"), 
                    $window    = $(window),
                    offset     = $sidebar.offset(),
                    topPadding = 50;

                $window.scroll(function() {
                    if($window.scrollTop() > $('h3').offset().top) {
                        $sidebar.stop().css('marginTop', '680px');              
                    } else if ($window.scrollTop() > offset.top) {
                        $sidebar.stop().animate({
                            marginTop: $window.scrollTop() - offset.top + topPadding
                        }, 100, function() {
                        });
                    } else {
                        $sidebar.stop().animate({
                            marginTop: 0
                        });
                    }
                });

            };

if ($(window).width() > 767) 部分会在视口宽度超过 767 像素时阻止侧边栏滚动。 if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); } 部分用于当视口顶部碰到所需元素h3 时，滚动停止。那部分必须是第一位的，因为else if 声明总是正确的！然后我只是减少了动画时间以停止滞后。

【讨论】：