Medium Style Sticky Unveiled Navigation with jQuery

File Size: 19.6 KB
Views Total: 1937
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Medium Style Sticky Unveiled Navigation with jQuery

A inspired jQuery sticky navigation that automatically disappears as you scroll down the web page. As you scroll up or reach the very bottom of the page, it reappears again.

How to use it:

1. Load jQuery library and the jQuery Unveiled Navigation plugin at the bottom of the web page.

<script src="//"></script>
<script src="js/jquery.unveiledNavigation.js"></script>

2. Create a header navigation for your web page.

<header class="unveiled-navigation">header</header>

3. Make it sticky at the top of your web page.

.unveiled-navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

4. Call the plugin as follow.


5. Options and defaults.


// Offset in px for unveiling
offset: 0,  

// Acceleration of unveiling/hiding
acceleration: 1,  

// Class that will be added when at the top
topClass: 'at-top', 

// Class that will be added when last scroll movement was downwards
downClass:       '',   

// Timeout before the navigation gets unveiled on scroll stop

// Esing function that is used for automatical unveiling/hiding
easing: 'swing',    

// Duration of the automatic unveiling/hiding
duration: 500,

// Should the navigation be unveiled automatically when reacing the bottom of the page?
unveilAtBottom: true        


6. API methods.

// cover the navigation

// unveil the navigation

// disable the functionality and show the navigation

// re-enable the functionality

Change log:


  • Add enable/disable functionality


  • Add plugin option to decide whether the navigation should be unveiled when reaching the bottom of the page

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