物化圖釘滾動跳

Question

所以我有一個滾動時在導航欄元素上使用圖釘功能一個奇怪的問題。

當在頁面上向下滾動時，一旦圖釘導航欄到達固定的頂部，頁面上的內容突然向上跳躍。

Here's a codepen to illustrate what I mean

如果有人能指出我在做什麼錯了，我將非常感激。

---

我圖釘的初始化：

$('#navbar').pushpin({ 
    top: $('#wrapper').offset().top 
}); 

一般HTML結構：

<div class="intro"> 
    ... 
</div> 
<div id="wrapper"> 
    <nav id="navbar"> 
     ... 
    </nav> 
    <div class="content"> 
     ... 
    </div> 
</div> 

Answer 1

在情況下，它可以幫助任何人，這裏的解決方案：

包裹在一個div導航欄一個固定的高度等於導航欄。當圖釘將導航欄從相對位置改爲固定位置時，這會改變文件佔用空間的方式。無論導航欄的位置如何，具有設定高度的包裝div都會節省空間。

HTML

<div id="wrapper"> 
    <nav id="navbar"> 
     ... 
    </nav> 
</div> 

JS

$('#navbar').pushpin({ 
    top: $('#navbar').offset().top 
}); 

CSS

#wrapper { 
    //height equal to height of navbar 
    height: 64px; 
}