How to create a dynamic navigation bar which follows you when you reach certain location

问题

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

回答1:

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.

回答2:

Note: this won't work with the Android 2.3 browser; position:fixed will not behave as expected - it kinda of temporarily attaches its position to the scrolling element before jumping back to the top.

回答3:

if you want you could just set the z-index to be a specific No. and that should work.

example z-index:100;

来源：https://stackoverflow.com/questions/10088243/how-to-create-a-dynamic-navigation-bar-which-follows-you-when-you-reach-certain

标签

javascript

html

css

navigationbar