物化图钉滚动跳

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; 
}