实现图钉滚动跳跃

Question

所以当在navbar元素上使用图钉功能时,我有一个奇怪的滚动问题.

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

这是一个用于说明我的意思的代码

如果有人可以指出我做错了什么,我将非常感激.

---

我的图钉初始化:

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