javascript - 在 zendesk.com 上创建“浮动”顶部导航？

Question

我想创建一个“浮动”顶部导航，就像在这里看到的那样。

当向下滚动页面时，顶部导航当然会从浏览器窗口中消失，但它会回到视图中，并一直保持在顶部。

我可以看到 CSS 正在更改div#nav-bar-content，但我无法弄清楚这些样式何时应用于 JavaScript。

如果有人指出如何使用 jQuery 实现它，或者在Zendesk源代码中我可以找到一个示例，那就太好了。

非常感谢您！

问候金

Answer 1

scroll您应该在每个事件上重新定位您的菜单。

<div class='menu'>Menu content</div>

---

$(window).scroll(function(e) {

    if ($(window).scrollTop() > 20) // 20 - offset from the top
        $('.menu').css({
            position: 'fixed',
            top: '0'
        });
    else
        $('.menu').css({
            position: 'static'
        });
});

更新：以及使用 CSS 的静态解决方案：

div.menu {
    position: fixed;
    top: 10px;
    z-index: 5000;
}