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

Question

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

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

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

当您访问给定的网站时，尝试向下滚动，您就会明白我在说什么。由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;
}

Answer 1

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

您可以在此处找到一个工作示例和一些详细信息

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

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

Answer 2

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

Answer 3

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

例如 z-index:100;