Headroom.js and Fixed Navigation

Last year on realtor.org, we had a request to implement a fixed navigation scheme. After gathering all of our requirements, we wrote some custom javascript to detect scroll position and engage a few dynamic elements at certain scroll points. This form of using a fixed navigation bar has become a very popular trend across the web.

Realtor.org is a bit different than most implementations because we have two horizontal bars that snap together and become fixed at the top of the page instead of one. We have only implemented this fixed navigation in the desktop and large tablet layouts of our site. REpurposed Apps on the other hand uses a fixed navigation bar for smartphones and small tablets only. There are reasons for each implementation, but both provide a much better experience than having to scroll back to the top of the page.

Not long ago, I discovered a javascript library that provides an interesting framework for fixed navigation called headroom.js. Headroom.js is a javascript library for fixed navigation that slides out of view when a user scrolls down. When scrolling back up, the navigation bar slides back into view. This is a particularly friendly scheme for navigation on mobile websites preventing a persistent navigation bar from taking up valuable screen space. We don’t currently use it for any of our projects, but I have plans to use it soon.

If you’re interested, headroom.js is available as a javascript, jquery/zepto, or angularjs library.

Greg Stinton

Lead Web Software Developer
Center for REALTOR® Technology
National Association of REALTORS®

More Posts - Twitter - Facebook - LinkedIn - Google Plus