如何创建一个动态导航栏，当你到达某个位置时，它跟随你 [英] How to create a dynamic navigation bar which follows you when you reach certain location

问题描述

我要创建一个类似于此网站的导航栏：

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 =; 
} 
} 
 
函数getScrollTop（）{
 if（window.onscroll）{
 //大多数浏览器
返回window.pageYOffset ; 
} 
 
 var d = document.documentElement; 
 if（d.clientHeight）{
 // IE在标准模式下
 return d.scrollTop; 
} 
 
 // IE处于quirks模式
 return document.body.scrollTop; 
} 
  

解决方案

可以通过固定位置样式实现。
如果你想让你的导航栏保持完全相同的位置， position：fixed; 就够了。 （至少不是IE6）

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

但是，如果您希望导航栏从您的初始位置移动到页面的上边界，您必须实现一些JavaScript来捕获页面滚动事件，请相应地移动< div> 。

请参阅这个问题，以了解如何做。 p>

I want to create a navigation bar similar to this site's:

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

Can anyone tell me how to create that navigation bar, which follows you as you scroll the page down, but not following you at the initial loading of page?

When you access to the given website, try to scrolling down and you will understand what I am talking about. The navigation bar that consists of MY SHOP, OFFERS, IDEAS & LIFESTYLE, BAKERY and so-on...

I have really no idea what it's called. At least tell me what it's called, so I'll be able to search.

Here is the solution I've done

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

解决方案

Holding an element on same position can be achieved by fixed position styling. If you want your navigation bar to stay on exact same location, position:fixed; is enough. (At least non IE6)

You can find a working example and some details here

However, if you want your navigation bar to move from it's initial location to the top border of page as you scroll the page down, you must implement some JavaScript to catch page scroll event and move the <div> accordingly.

See this question for an example on how to do that.

这篇关于如何创建一个动态导航栏，当你到达某个位置时，它跟随你的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！