Question

I am trying to find a decent tutorial or code sample of how to achieve a common effect I see around the web. Essentially its having an element attach itself to the top of the window when it meets the element while scrolling. Quite frankly I have no idea what to call this functionality, or how to go about searching for the specifics of achieving it.

Here is on example, from the Twitter Bootstrap Docs. The bar under the heading & sub-heading will attach itself to the window as it scrolls past to help you navigate the page.

Another example is on the Android Developers Pages. The left side navigation element will attach itself to the window on scroll.

Any assistance in this is greatly appreciated.

Thanks in advance & cheers!

Answer 1

Check out jquery-waypoints and the Sticky Elements Example.