Midnight.js – A jQuery plugin that switches between multiple header designs as you scroll

      

A jQuery plugin that switches between multiple header designs as you scroll, so you always have a header that looks great with the content below it.

To make everything work, just load midnight (and jQuery) and initialize it.
Want to use custom markup for each header?

You just need to add a div with the class .midnightHeader.default inside your header, as well as any other custom headers you want.

For instance the “butterflies” section will use the .midnightHeader.butterflies header, and any other ones will just use the markup from .midnightHeader.default.

midnightjs

Demo & Download