How to build floating menu bar when scroll down? I saw from sitepoint

HTML & CSS
1

How to code this? when I scrolled down site display black menu bar at the top look like float bar.

1901×287 45.7 KB

Can you tell me how to do this?

Thank you

2

while not always a good idea, design wise. this is easily accomplished with:

#menucontainer {position:fixed; top:0; height: 250px} /* am using pixels just so you know that the values must be equivalent to one another*/
#firstElement {margin-top: 250px}

hope that helps

3

no no the purpose is learn how to build and I will recreate my menu not same sitepoint.

4

There is some JavaScript involved in that menu, as it only appears when you scroll down the page.

5

Can you tell me what kind of javascript you mention?

6

Unfortunately, the page code is a bit too much of a mess for me to see exactly what code is doing that. But here is a recent article that shows the basic options for doing this:

http://uxdesign.smashingmagazine.com/2012/09/11/sticky-menus-are-quicker-to-navigate/

7

Thank you