jQuery Plugin To Create Fixed Navigation As You Scroll - midnight.js

File Size: 989 KB
Views Total: 4511
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Fixed Navigation As You Scroll - midnight.js

midnight.js is a cross-platform jQuery plugin used to sublty change your headers to make them match the content as you scroll. It allows to switch between multiple fixed header designs on the fly, so it looks in line with the content below it.

Basic usage:

1. Include the necessary jQuery library and the jQuery midnight.js script into your document.

<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="midnight.jquery.js"></script>

2. Create a fixed navigation for your web page.

<nav class="fixed">
  <div class="midnightHeader default">
    ...
  </div>
</nav>

3. Make sure the navigation container has a fixed position defined in your CSS.

nav.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 9999;
  height: 300px;
  pointer-events: none;
}

4. Initialize the plugin on document ready.

$(document).ready(function(){
  $('nav.fixed').midnight();
});

5. Available settings.

// 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',

Change logs:

v1.1.2 (2017-05-05)

  • Added support for multiple navs

v1.1.1 (2015-03-07)

  • Fixed a header calculation bug on Chrome 41.
  • Fixing issue with transformArray length.
  • Restructure.

v1.0.3 (2014-10-01)

  • Moved the scrollTop limiter to the Frame Loop.

This awesome jQuery plugin is developed by Aerolab. For more Advanced Usages, please check the demo page or visit the official website.