Midnight: Switch Fixed Headers

Midnight is a jQuery plugin to switch fixed headers on the fly.

What this means in practical application, is that a header can change color, weight or size based on the background. It works on scroll so that your header text or image is always optimized for on-screen environment.

Plus Midnight is pretty easy to use. Create your fixed navigation (or header) as you typically would, using whatever markup suits you, just make sure the header works well with position:fixed. Then take sections of your page that need a different aesthetic and add data-midnight=”your-class” to it, where .your-class is the class you are going to use to style that header.

Add a little styling and you are done. Use whatever CSS or markup you like for each one. They will be switched automatically when necessary. To make it all work, just load Midnight (and jQuery) and initialize. A little developer “magic” takes care of the rest.

You can further add customization with custom markup for each header as well.

There are a few known issues with this plugin and older browsers, so if you have a large user based operating in the pre-iOS 7 era, beware.