粘邊欄滾動滯后和無限滾動

Question

我有一個可在頁面上向下滾動的邊欄。 但是，側邊欄似乎落后於頁面的滾動，例如。 向下滾動，並在幾秒鍾后顯示側邊欄。 此外，側欄將繼續下降，使頁面更長，並導致頁腳無法訪問。 我該怎么做才能使邊欄隨滾動一起移動，並使邊欄在頁腳處停止移動？ 這是我的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/上看到一個示例。 修復代碼是值得歡迎的，但是最好只指出正確的方向。

Answer 1

嘗試使用純CSS解決它：

.affix {
  position: fixed;
}

或者，您可以使用像這樣的現有jQuery插件： http : //andrewhenderson.me/tutorial/jquery-sticky-sidebar/

Answer 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)視口寬度大於if ($(window).width() > 767)部分可防止側邊欄滾動。 if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); } if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); }部分用於當視口頂部碰到所需元素h3 ，滾動停止。 該部分必須放在第一位，因為else if語句始終為真！ 然后我只是減少了動畫時間來停止滯后。