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

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

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

• javascript
• html
• css
• navigationbar

• This question has already been answered here stackoverflow./q/6691558/144432 – Cengiz Can Commented Apr 10, 2012 at 12:12

3 Answers 3

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.

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.

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

example z-index:100;