Jquery 具体化图钉滚动跳转

因此，在navbar元素上使用图钉功能时，我有一个奇怪的滚动问题

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

如果有人能指出我做错了什么，我将非常感激

---

我的图钉初始化：

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

通用HTML结构：

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

...
...
...

如果对任何人都有帮助，以下是解决方案：

以与导航栏相同的固定高度将导航栏包裹在div中。当图钉将导航栏从“相对”更改为“固定”时，将更改它在文档中占用空间的方式。无论导航栏的位置如何，具有设置高度的包装器div都将保留该空间

HTML

CSS

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

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

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