Javascript scrolling menu that starts only after a certain ways down the page

Question

I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.

Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.

There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.

I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).

** edit **

I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.

Answer 1

It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that. You can find an example here Creating a floating box which stays within a div