The use of fixed headers, which stay static as a user scrolls down a page, is currently a popular approach to keeping navigation in front of website visitors.
Depending on the size and required prominence of navigation, however, they can end up occupying a significant portion of the content area. There's a better way!
Headroom.js is a lightweight, high-performance JS widget without dependencies that enables a website to react to the user scroll, bringing elements into view when appropriate (like when that user navigates to the top of the page for example). What it is that you're doing essentially is putting your content in focus.
The plugin works by adding and removing CS classes from an element in response to a scroll event. Headroom.js has a pure JS API, and optional jQuery/Zepto-compatible and AngularJS plugins.
Digital marketing executive with proven experience in all aspects of search engine optimization (SEO), performance-based advertising, consumer-generated/social media, email marketing, lead generation, Web design, usability, and analytics. - 20-year Internet marketing veteran, currently serving as the Digital Marketing Campaign Manager at Antenna Group (formerly Chicago Digital). - Former Editor-In-Chief of Website Magazine, and a regular speaker on Web technology digital marketing strategy - Author of several books on digital marketing Including Web 360: The Fundamentals of Web Success; Affiliate 360: The Fundamentals of Performance Marketing; Domains 360: The Fundamentals of Buying & Selling Domain Names, and SEO 360: The Fundamentals of Search Engine Optimization.