Midnight.js - Switch fixed headers on the fly

The Header

Create your fixed nav (or header) as you typically would.

You can use whatever markup suits you, just make sure the header works well with position:fixed.

<!-- Your Fixed Nav -->
<nav class="fixed">
  <a class="logo">Logo</a>
</nav>

The Sections

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 class will be used for that section.

<section data-midnight="white">
  <h1>Use a white nav here</h1>
</section>

<div data-midnight="blue">
  <h1>And a blue nav here</h1>
</div>

<footer>
  <h1>This will just use the default header</h1>
</footer>

Styling your headers

You can style it in your css using the class .midnightHeader.your-class.

Use whatever CSS or markup you like for each one. They will be switched automatically when necessary.

.midnightHeader.default {
  background: none;
  color: black;
}
.midnightHeader.white {
  background: white;
  color: black;
}
.midnightHeader.blue {
  background: blue;
  color: white;
}

The jQuery Plugin

To make everything work, just load midnight (and jQuery) and initialize it. We take care of the rest.

<script src="midnight.jquery.js"></script>
<script>
// Start midnight
$(document).ready(function(){
  // Change this to the correct selector.
  $('nav.fixed').midnight();
});
</script>

Further customization

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.

<nav class="fixed">
  <!-- Your standard header -->
  <div class="midnightHeader default">
    <a class="logo">Logo</a>
  </div>

  <!-- A header with butterflies -->
  <div class="midnightHeader butterflies">
    <a class="logo">Logo</a>
    <span class="a-butterfly"></span>
    <span class="another-butterfly"></span>
  </div>
</nav>