How to replicate this?

[yozo67]

How can I make my navigation bar lock on to the top of the page only after you scroll down to it, sort of like the navigation bar at http://www.freedom.tm/ .

 

I need it for the second section of my site. I need it lock on the top because it's a long page. Any help would be so awesome!

[Aho]

A simple way to do this is by adding a scroll event listener and changing the position of the element once the client scrolls past it.

 

Essentially:

 

- Get position of element relative to the page

- Compare current scroll position to element's position

- Set position property to fixed and top/left properties to 0 if the scroll position is >= the element position

- Reset the position to its default if scroll position <= the element position

 

Items 3 and 4 could be done without an if statement using CSS.

 

You could also use a library such as Waypoints (jQuery plugin), but it's likely unnecessary for your uses.

[LukeTim]

This little jQuery extension will do it... assuming you're already using jQuery. https://github.com/garand/sticky 

[bufli]

There are a lot of tutorials online about this

Ex: http://stackoverflow.com/questions/14667829/how-to-create-a-sticky-navigation-bar-that-becomes-fixed-to-the-top-after-scroll

Demo: http://jsfiddle.net/CriddleCraddle/Wj9dD/