Auto Show/ Hide Sticky Header Plugin With jQuery - stickEmUp

File Size: 4.79 KB
Views Total: 3408
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Auto Show/ Hide Sticky Header Plugin With jQuery - stickEmUp

Just another jQuery sticky header plugin which automatically makes your header navigation show / hide based on the scroll position & direction.

How it works:

  • Auto sticks your header navigation to the top when you scroll down.
  • Auto hides the header navigation when you scroll a certain distance (Default: 150px).
  • Auto reveals the header navigation again when you scroll up.

How to use it:

1. Create the stikcy header navigation from a nav list like this:

<header>
  <nav>
    <ul>
      <li><a href="">Home</a></li>
      <li><a href="">Categories</a></li>
      <li><a href="">Most Popular</a></li>
      <li><a href="">Contact us</a></li>
    </ul>
  </nav>
</header>

2. Place jQuery library and the jQuery stickEmUp plugin's script at the bottom of your webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="stick-em-up.js"></script>

3. Make the header navigation stick to the top of the webpage when you scroll past it.

$('header').stickEmUp();

4. Default configuration options.

$('header').stickEmUp({
  autoMove: true,
  offset: 150,
  fixedClass: 'stickEm-fixed',
  inClass: 'stickEm-in',
  outClass: 'stickEm-out',
  delay: '',
  duration: '.3s'
});

Change log:

2016-05-23

  • accidental conditional

2016-05-21

  • fixed class not being removed, added resize function, cleaned up val

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