Auto Appearing And Disappearing Sticky Header - Stickify

Stickify is a jQuery plugin for creating a smart sticky header/bottom navigation that automatically appears and disappears based on scroll direction.

How It Works:

• Hides the sticky header as the user scrolls down more than a specific vertical delta.
• Reveals the sticky header when the user scrolls up the page.

How to use it:

1. Create a sticky header on your webpage.

<div class="example">
  Any Content Like Navigation Lists 
  Or Notification Messages
</div>

2. Load the jQuery Stickify plugin after jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/stickify.js"></script>

3. Attach the function stickify to the sticky header. That's it.

$(function(){
  $('.example').stickify();
})

4. Enable the Reverse mode so that the sticky header will auto show/hide based on scroll direction.

$(function(){
  $('.example').stickify({
    reverse: true
  });
})

5. Sticky the element to the bottom of the page instead.

$('.example').stickify({
  position: 'bottom'
});

6. Customize the duration of the enter/exit animation. Default: '0.4'.

$('.example').stickify({
  animationDuration: '0.5'
});

7. Determine the width of the sticky header. Default: '100%'.

$('.example').stickify({
  width: '90%'
});

8. Determine the vertical stacking order of the sticky header. Default: '9999'.

$('.example').stickify({
  zIndex: '999'
});

Changelog:

2020-12-23

• Update

2020-12-22

• Code refactor

2020-12-20

• Added options

---

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