Web Site Design Method

Hey experts,

can anyone tell me how the following web page keeps the nav bar stuck to the top of the page when you scroll down?


What piece of code does this?


Who is Participating?
CraisisConnect With a Mentor Commented:
Hi Jeff,

There is two parts to the nav bar on that site.  The first is the use of "position:fixed;" and "top: -10px", that is the code that sticks the nav bar to the top of the screen.

There is also a javascript portion (in http://barebonesmusic.net/javascripts/magic-nav.js) that changes the CSS from "position: static" to "position: fixed" and vise versa depending on what portion of the page you are viewing.  For example, if you scroll all the way to the top of the page the position is static, allowing the nav bar to be in the middle of the page, when you scroll down so the nav bar would disappear the position is changed to fixed.

probably position:fixed

jeffiepooAuthor Commented:
I don't think that would make sense because it isn't fixed to the top of the page until you scroll down. Otherwise it is below the top of the Bare Bonez label.
jeffiepooAuthor Commented:
Cool, thanks!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.