具体化图钉滚动跳跃

Question

因此，在导航栏元素上使用图钉功能时，我在滚动时遇到了一个奇怪的问题。

在页面上向下滚动时，一旦图钉导航栏到达顶部，它就会固定，页面上的内容会突然向上跳跃。

这里有一个代码笔来说明我的意思

如果有人能指出我做错了什么，我将不胜感激。

---

我的图钉初始化：

$('#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;
}