javascript - 像在 zendesk.com 上那样创建 "floating"顶部导航？

Question

我想创建一个“ float ”顶部导航，就像在 here 上看到的那样.

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

我可以看到 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;
}