如何在到达特定位置时创建跟随您的动态导航栏

Question

我想创建一个类似于这个站点的导航栏：

asda.html

有人能告诉我如何创建导航条吗?当你向下滚动页面时，它会跟随你，但不会在初始加载页面时跟随你。

当你访问给定网站时，试着向下滚动，你就会明白我在说什么。导航酒吧，包括我的商店，提供，创意和生活方式，面包店等.

我真的不知道它叫什么。至少告诉我它叫什么，这样我就可以搜索了。

这里是我做的解决方案

window.onscroll = function(){
    if(getScrollTop()>140) {
        document.getElementById("menu").style.position="fixed";
    } else {
        document.getElementById("menu").style.position="";
    }
}

function getScrollTop() {
    if (window.onscroll) {
        // Most browsers
        return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
        // IE in standards mode
        return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}

Answer 1

在同一位置上保持一个元素可以通过固定位置样式来实现。如果您希望导航条保持在完全相同的位置，position:fixed;就足够了。(至少非IE6)

您可以找到一个有用的例子和一些细节这里

但是，如果希望导航条在页面向下滚动时从其初始位置移动到页面的顶部边框，则必须实现一些JavaScript来捕获页面滚动事件并相应地移动<div>。

有关如何执行该操作的示例，请参阅这个问题。

Answer 2

注意:这将不适用于Android2.3浏览器；position:fixed将不会像预期的那样运行--在跳回顶部之前，它会暂时将其位置附加到滚动元素上。

Answer 3

如果你想要的话，你可以把z-索引设为一个特定的No。这应该管用。

例子z-索引:100；