粘滯的標題滾動問題

Question

我在網站上有一個粘性標題。 但是當視口底部下方有一個非常特定數量的內容（大約等於我的html上的2-3x padding-top）時，如果試圖慢慢滾動，則滾動會上下振動。 如果頁面下方有大量內容，則效果很好。

編輯：對不起，如果我的原始問題不夠清楚，但我希望整個頁面滾動，直到'標題'到達屏幕頂部，然后（並且只有那時）讓標題停止滾動，而頁面的其余內容繼續滾動它。

這是一個JSfiddle

 $(function () { // Check the initial Poistion of the Sticky Header var stickyHeaderTop = $('#stickyheader').offset().top; $(window).scroll(function () { if ($(window).scrollTop() > stickyHeaderTop) { $('#stickyheader').css({ position: 'fixed', top: '0px' }); $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true)); } else { $('#stickyheader').css({ position: 'static', top: '0px' }); $('#othercontent').css('margin-top', '0px'); } }); }); 

 body { font: 13px sans-serif; padding-top: 20px; } #stickyheader { width: 100%; height: 40px; background:black; color:white; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="stickyheader">Sticky header</div> <div id="othercontent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> 

Answer 1

您正在檢查if ($(window).scrollTop() > stickyHeaderTop) ，它允許標題在運行代碼以更新CSS之前在屏幕上方滾動一個像素，然后CSS將其推下。

此外，您正在根據要修改的元素運行計算，從而導致抖動。 首先設置計算的邊距，然后在#stickyheader元素上執行編輯：

$(function () {
    var stickyHeaderTop = $('#stickyheader').offset().top;

    $(window).scroll(function () {
        if ($(window).scrollTop() >= stickyHeaderTop) { // <-- Notice the greater than or equals to.
            $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true)); // <-- This has to be before the #stickyheader changes.
            $('#stickyheader').css({
                position: 'fixed',
                top: '0px'
            });
        } else {
            $('#stickyheader').css({
                position: 'static',
                top: '0px'
            });
            $('#othercontent').css('margin-top', '0px');
        }
    });
});

 $(function () { var stickyHeaderTop = $('#stickyheader').offset().top; $(window).scroll(function () { if ($(window).scrollTop() >= stickyHeaderTop) { $('#othercontent').css('margin-top', $('#stickyheader').outerHeight(true)); $('#stickyheader').css({ position: 'fixed', top: '0px' }); } else { $('#stickyheader').css({ position: 'static', top: '0px' }); $('#othercontent').css('margin-top', '0px'); } }); }); 

 body { font: 13px sans-serif; padding-top: 20px; } #stickyheader { width: 100%; height: 40px; background:black; color:white; margin-bottom: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="stickyheader">Sticky header</div> <div id="othercontent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> 

Answer 2

我不確定為什么你可以編寫一個函數來管理滾動行為，當你可以使用一些html和css來實現你所需要的。

更新了小提琴

 body { font: 13px sans-serif; margin: 0px; <!-- container margin removed to prevent content appearing above --> } #stickyheader { width: 100%; height: 40px; background: black; color: white; position: fixed; <!-- add position fixed --> top: 0px; <!-- stick it to the top --> } #othercontent { padding-top: 50px; <!-- added to offset header --> } 

 <div id="stickyheader">Sticky header</div> <div id="othercontent"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> </div> 

如果您有任何其他問題，這個tutorail提供了所需的所有基本信息：

使用CSS創建固定標頭