Submit your widget

Switches between multiple header designs scroll with jQuery

Created 5 years ago   Views 15255   downloads 3128    Author Aerolab
Switches between multiple header designs scroll with jQuery
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.

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>

Read more: