Submit your widget

Midnight--- jQuery plugin to switch fixed headers

Created 4 years ago   Views 12553   downloads 2820    Author Aerolab
Midnight--- jQuery plugin to switch fixed headers
View DemoDownload 1.0 MB
Share |

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.

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-classis 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.

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;
} {
  background: blue;
  color: white;
} {
  background: red;
  color: white;

Read more: