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

实现图钉滚动跳跃

1 个答案: