如何创建一个动态导航栏，当您到达某个位置时跟随您答案

【问题标题】：How to create a dynamic navigation bar which follows you when you reach certain location如何创建一个动态导航栏，当您到达某个位置时跟随您
【发布时间】：2012-04-10 11:51:28
【问题描述】：

我想创建一个类似于本网站的导航栏：

http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html

谁能告诉我如何创建导航栏，它在您向下滚动页面时跟随您，但在页面初始加载时不跟随您？

当您访问given website 时，尝试向下滚动，您就会明白我在说什么。由MY SHOP、OFFERS、IDEAS & LIFESTYLE、BAKERY等组成的导航栏……

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

这是我的解决方案

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

【问题讨论】：

这个问题已经在这里回答了stackoverflow.com/q/6691558/144432

标签： javascript html css navigationbar

【解决方案1】：

将元素保持在同一位置可以通过fixed position 样式来实现。如果您希望导航栏保持在完全相同的位置，position:fixed; 就足够了。（至少非 IE6）

你可以找到a working example和一些细节here

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

请参阅this question 了解如何执行此操作的示例。

【讨论】：

谢谢，但我不希望菜单一直跟随。我希望导航与给定网站完全相同。你有这样的例子吗？

【解决方案2】：

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

【讨论】：

【解决方案3】：

如果您愿意，您可以将 z-index 设置为特定的编号，这应该可以。

示例 z-index:100;

【讨论】：