Auto Appearing And Disappearing Sticky Header - Stickify

File Size: 18.6 KB
Views Total: 1138
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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

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.


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

    reverse: true

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

  position: 'bottom'

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

  animationDuration: '0.5'

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

  width: '90%'

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

  zIndex: '999'




  • Code refactor


  • Added options

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