javascript-如何创建动态导航栏,当您到达特定位置时会跟随您

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

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

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

当您访问given website时,尝试向下滚动,您将了解我在说什么.导航栏包括“我的商店”,“优惠”,“想法”和“生活方式,面包店等

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

这是我已经完成的解决方案

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

解决方法:

可以通过fixed position样式将元素保持在相同位置.
如果您希望导航栏保持在完全相同的位置,请固定位置：固定；足够. (至少是非IE6)

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

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

有关如何执行此操作的示例,请参见this question.

标签：html,navigationbar,javascript,css
来源： https://codeday.me/bug/20191009/1877978.html