实现图钉滚动跳转

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 中，固定高度等于导航栏。当图钉将导航栏从相对更改为固定时，这会更改它在文档中占用 space 的方式。具有设置高度的包装器 div 将保留 space 而不管导航栏的位置如何。

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

实现图钉滚动跳转

Materialize pushpin scrolling jumps

css

jquery

scroll

pushpin

materialize