如何通過添加固定內容來避免內容跳躍？

Question

我在滾動條上創建了一個粘性標頭。 唯一的問題是，當我向下滾動1000px ，類sticky被添加到頭部，之后，有內容在同一時刻有點跳的時候類sticky被添加到頭部。 我認為這成為了，因為標頭在視覺上不再存在於標頭中。

我試圖為頁眉添加特定的高度。 還要在container周圍包裝一個div，以便sub-header保留在該位置，但不會成功。 我該如何解決？

實時代碼： http : //codepen.io/anon/pen/qbaQvL?editors=110

Answer 1

當粘貼激活時，還需要將about元素的頁邊距頂部設置為等於粘貼的高度。

就像這樣：

 if (windowPos >= content) { $('#sub-header').addClass('sticky'); $('#about').addClass('sticky-active'); } else { $('#sub-header').removeClass(); $('#about').removeClass(); } 

 #about.sticky-active { margin-top: 96px; } 

我也做了一個工作版本的Codepen。 你可以在這里看到它。

Answer 2

創建粘性標頭時，只需向主體添加填充：

JS：

if (windowPos >= content) {
  $('#sub-header').addClass('sticky');
  $('body').addClass('sticked');
} else {
  $('#sub-header').removeClass();
  $('body').removeClass('sticked');
}

CSS：

body.sticked {
  padding-top: 96px;
}

Answer 3

您可以在滾動過程中給標題一個絕對的位置：

...
#sub-header {
    position: absolute;
  width: 100%;
}
#sub-header, #sub-header.sticky {
    background: #FFF;
    border-bottom: 1px solid #f0f0f0; 
    z-index: 2000;
}
...

...並在您的部分中添加填充：

section {
  padding-top: 96px;
}

http://codepen.io/anon/pen/PZGxMZ