I am pretty new to positioning in css (e.g. relative, fixed, absolute). What I’m trying to do is create a fixed nav bar at the top of my screen that remains there while the user scrolls down the content.
This is accomplished easily enough by positioning it as absolute, top:0, left:0. The problem is, I have a hidden contact panel that slides down when the user clicks ‘contact’ in the nav menu. I want the nav bar to be moved down with it, appearing below the contact panel. So I had to change the nav from position absolute to fixed. This allowed it to be moved down below the contact panel, but when you continue scrolling, the nav bar remains in the middle of the window, instead of at the very top.
I have some sample code here: http://jsfiddle.net/hwDwR/51/
So to sum up, I want the green nav bar to “stick” to the blue contact panel until the nav bar reaches the top of the window. I want the nav bar to always be displayed at the top (like it appears before showing the hidden div) even after displaying the hidden content.
Hopefully I have been able to explain what I’m trying to do. Any help would be greatly appreciated!
**RESOLVED: Thanks again for the replies, but this is the effect I was aiming for: http://jsfiddle.net/hwDwR/66/ (will post as answer in 6 hours)
This is the effect I was after: http://jsfiddle.net/hwDwR/66/
Thanks again for your replies, I have been puzzled by this for a day or two.