Highly Configurable jQuery Sticky Header Plugin - Sticky Header

Just another jQuery sticky header plugin which allows you to make any DOM element (typically header navigation) stick to the top of browser window when scrolling down.

How to use it:

1. Download and include the jQuery Sticky Header plugin's script after you've included jQuery JavaScript library.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="sticky-header.js"></script>

2. Create a sticky header for your site navigation.

<header class="site-navigation"> 
  <!--  navigation here --> 
</header>

3. Call the plugin on the header element and done.

$('.site-navigation').stickMe(); 

4. All configuration options with default values.

$('.site-navigation').stickMe({

  // Transition duration of animation
  transitionDuration: 300,

  // Header will have shadow when it becomes sticky
  shadow: false,

  // The opacity of shadow that header gets when it's sticky
  shadowOpacity: 0.3,

  // Enable animation
  animate: true,

  // true: header becomes sticky when it reaches the center of viewport
  // false: make header sticky just when header is scrolled out of the viewport
  triggerAtCenter: true,

  //  Header will become sticky when the body is scrolled down by 300 pixels
  topOffset: $elemHeight,

  // 'fade' or 'slide'
  transitionStyle: 'fade',

  //  Makes header sticky when page loads
  stickyAlready: false
  
}); 

5. Events.

$('.site-navigation').on('sticky-begin', function() { 
  // When header gets sticky 
});

$('.site-navigation').on('sticking', function() { 
  // When header is sticking
});

$('.site-navigation').on('top-reached', function() { 
  // When document's top is reached
});

$('.site-navigation').on('bottom-reached', function() { 
  // When document's bottom is reached
});

Change log:

2016-01-14

• JS update

About Author:

Author: Danish Iqbal

Website: http://plugins.imdanishiqbal.com/sticky-header

---

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