Creating absolute positioned div that becomes fixed on scroll - is it possible?

Question

I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.

So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.

If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.

Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?

Thanks in advance!

Answer 1

I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.