Midnight.js – Easily switch fixed headers on the fly

Midnight.js is a jQuery plugin that lets you subtly change your headers to make them match the content as you scroll.

Midnight.js is a truly exciting new jQuery plugin created by Aerolab. The magic is that – the plugin switches between multiple headers as you scroll and the fixed header always looks great with the content below it. Midnight.js is also very easy to be implemented.

To start, you just need to create a fixed nav and use whatever markup you want. When done you have to be sure that the header looks good and works great with position:fixed.  After that, take any of the sections of the page you are creating that need a different nav and add “data-midnight=”your-class” which is the class you will be using to style the header. Then you should just style the headers and initialize the plugin and you are good to go. Midnight.js will make your site stand out. Below is the full explanation of how to set it up as well as the demo and the download info.

Midnight.js - Switch fixed headers on the fly

Demo  Download Midnight.js


Quick start

Create your fixed nav (or header) as you typically would. For an example, something like this (you can use whatever markup suits you)

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

Make sure the header works well with position:fixed

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.

<section data-midnight="white">
  <h1>A section with a dark background, so a white nav would look better here</h1>

<div data-midnight="blue">
  <h1>A blue nav looks better here</h1>

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

Multiple headers as necessary will be created based on the classes declared in these sections.

Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.

You can style it in your css using the class .midnightHeader.your-class (replace your-class with the correct one). For example:

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

To initialize, just load midnight and initialize it

<script src="midnight.jquery.js"></script>
  // Start midnight
    // Change this to the correct selector for your nav.

Using custom markup

Let’s say you want to create a special header with a butterfly in it, which needs some extra markup. You need to do two things:

  • First, add a div with the class .midnightHeader.default . This will be the header that’s used for every section (that doesn’t have a specific style) and duplicated as necessary, automatically replacing .default with the correct class.
  • Then, add a div with the class .midnightHeader.your-class (like .butterfly). This will be used in that case instead, so you can use some custom markup in that case. Repeat this step for any other header with custom markup.
  • Keep in mind that all headers need to be the same height. Take that into account when styling your headers. If you have one that’s larger than usual, we recommend you make all the headers the same height and try to handle it with additional markup.
<nav class="fixed">
  <!-- Your standard header -->
  <div class="midnightHeader default">
    <a class="logo">Logo</a>

  <!-- A header with a butterfly -->
  <div class="midnightHeader butterfly">
    <a class="logo">Logo</a>
    <span class="a-butterfly"><!-- Everybody loves butterflies! --></span>
    <span class="another-butterfly"><!-- OH GOD THEY ARE IN MY FACE --></span>
    <span class="yet-another-butterfly"><!-- AAAAAHHHHHHHHHHHHHHHHHHHHH --></span>


You can use a variety of custom options when using midnight:

  // The class that wraps each header. Used as a clipping mask.
  headerClass: 'midnightHeader',
  // The class that wraps the contents of each header. Also used as a clipping mask.
  innerClass: 'midnightInner',
  // The class used by the default header (useful when adding multiple headers with different markup).
  defaultClass: 'default'

CDN Hosting

To lower hosting costs & have users load midnight.js faster, you can use the jsDelivr CDN like so:

<script src="//cdn.jsdelivr.net/jquery.midnight/{version}/midnight.jquery.min.js"></script>


You can use jsDelivr’s version aliasing & concocting to serve the latest minor branch version along with dependancies. For example, to download the latest patch versions of midnight.js v1.0.z together along with jQuery v1.11.z:

<script src="//cdn.jsdelivr.net/g/[email protected],[email protected]"></script>

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *