midnight.js | Switch your nav 's design on the fly | Navigation library

Midnight is available on Bower and NPM as midnight.js:.
Create your fixed nav (or header) as you typically would. For an example, something like this (you can use whatever markup suits you). After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where your-class is the class you are going to use to style that header. If you don't use the property or just leave it blank, the .default header will be used for that section. Multiple headers as necessary will be created based on the classes declared in these sections.