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.