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

我有一个随页面向下滚动的侧边栏。然而，侧边栏似乎落后于页面的滚动，例如向下滚动，侧边栏在几秒钟后显示。此外，侧边栏将继续向下移动，使页面变长，并导致页脚无法访问。我需要做什么才能使侧边栏随滚动条一起移动，并使侧边栏在页脚处停止移动？以下是我的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
                        });
                    }
                });

            });

---

一个例子可以在上看到。修复代码是受欢迎的，但只要给我指出正确的方向就是最好的。

尝试用纯CSS解决它：

.affix {
  position: fixed;
}

或者，您可以使用现有的jQuery插件，如下所示：

---

我就是这样解决问题的：

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

            };

---

如果$window.width>767，则当视口宽度大于767px时，part会阻止侧栏滚动。如果$window.scrollTop>$'h3'.offset.top{$sidebar.stop.css'marginTop'，'680px'；}部分用于视口顶部碰到所需元素h3时，滚动停止。该部分必须是第一部分，因为else if语句始终为真！然后我只是缩短了动画时间以停止延迟。

您考虑过使用引导吗？不是真的。我正在使用jQuery，已经有很多函数在使用它了。在你看来，Twitter Bootstrap的优势是什么？它是jQuery插件的集合，也是一个CSS框架。另一种选择是只使用CSS，我最初尝试过，但位置：固定；并不能将侧边栏保持在正确的水平位置。