I recently contributed some code to the Foundation responsive framework project on GitHub and am very proud that the code has made the master branch!

The functionality I wrote turns the standard Top Bar into a sticky navigation menu that will become fixed once the page scrolls to it’s position, just by adding the class .fixed. The class is removed when the page scrolls back up above it’s position too.

As for 3.2.4 (released today) the changelog reads:

Added functionality to create a stick top bar that enables it to be down the page in the markup and stick when it hits the browser edge.

What’s more, head on over to the Foundation’s documentation page:

Sticky Top Bar

As of 3.2.4, you can wrap you topbar in <div class="contain-to-grid sticky"> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s