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

Question

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

Answer 1

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

example z-index:100;

Answer 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.

Answer 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.