Question

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

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

任何人都可以告诉我如何创建导航栏，在您向下滚动页面时跟随您，但在初始加载页面时没有关注您吗？

当您访问given website时，请尝试向下滚动，您将了解我在说什么。导航栏包含MY SHOP，OFFERS，IDEAS＆amp;生活方式，面包等...

我真的不知道它叫什么。至少告诉我它叫什么，所以我将能够搜索。

以下是我已经完成的解决方案

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

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

您可以找到a working example和一些详细信息here

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

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

Answer 2

注意：这不适用于Android 2.3浏览器; position:fixed将不会按预期运行 - 它有点暂时将其位置附加到滚动元素，然后再跳回到顶部。

Answer 3

如果你想要你可以将z-index设置为特定的号码，那应该可行。

示例的z-index：100;

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

3 个答案: