Sticky Top Bar

Using the top-bar with the class `.sticky` and `.contain-to-grid`, it can be placed anywhere in the document. For example, under a heading but before the main content starts. 

Once the page is scrolled to where the navigation is, the class .fixed is added automatically and it remains at the top of the page. When scrolling back up, the class .fixed is removed once it hits it's
original position.

A `float: left` was added to so there's no jump in element position once the `.fixed` class is added during scrolling which causes a jump in the browser when scrolling (as the top-bar is taken out of the page flow). 

Edit: It provides this type of feature found with the jQuery sticky plugin - http://stickyjs.com/ but requires no additional plugins and is supported by Foundation.