<nav class="fixed">
  <a class="logo">Logo</a>
</nav>

<section data-midnight="white">
  <h1>A section with a dark background, so a white nav would look better here</h1>
</section>
<div data-midnight="blue">
  <h1>A blue nav looks better here</h1>
</div>
<footer>
  <h1>This will just use the default header</h1>
</footer>

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

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