屏幕不是很大時向下滾動時位置固定

Question

當用戶向下滾動時，我正在嘗試修復標題。 問題是頁面上的內容是否不夠大，導致屏幕跳動。 同樣，當我再次滾動到頂部時，它很難從固定變為正常。 有人可以幫我弄這個嗎？

window.addEventListener('scroll', function() {
if($(window).scrollTop() == 0) {
    $('.sticky-wrapper').removeClass('stickynow');
} else {
    $('.sticky-wrapper').addClass('stickynow');
}
});

Answer 1

我不太了解“屏幕跳變”的含義，但我想會發生什么情況，就是當您的標題變為position:fixed ，它不再占用空間，因此content會向上移動以填充該空間，從而“跳變” 。

您應該在內容中添加margin-top（或HTML結構中標頭之后的任何元素），使其等於標頭的高度。

見下文

 window.addEventListener('scroll', function() { let header = $('.sticky-wrapper') if ($(window).scrollTop() == 0) { $(header).removeClass('stickynow'); $('section').css({ 'margin-top': 0 }) } else { $(header).addClass('stickynow'); $('section').css({ 'margin-top': $(header).height() }) } }); 

 header { width: 100%; height: 100px; background: red; } .stickynow { position: fixed; background: blue; top: 0; left: 0; } section { height: 1000px; width: 100%; background: green; } body, html { margin: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="sticky-wrapper"></header> <section>Not 'Hopping'</section> 

選項B.不使用javascript / jQuery

如果您不需要添加類或涉及javascript / jQuery的其他內容，則可以得到與上述相同的結果，但只能使用CSS

 header { position: fixed; background: blue; top: 0; left: 0; height:100px; width:100%; } section { height: 1000px; width: 100%; background: green; margin-top:100px; /*add this*/ } body, html { margin: 0; } 

 <header class="sticky-wrapper"></header> <section>Not 'Hopping'</section>