Medium Style Sticky Unveiled Navigation with jQuery

A Medium.com 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="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></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.

$('.unveiled-navigation').unveiledNavigation();

5. Options and defaults.

$('.unveiled-navigation').unveiledNavigation({

// 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
timeout:300,

// 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
$('.unveiled-navigation').data('unveiledNavigation').cover()

// unveil the navigation
$('.unveiled-navigation').data('unveiledNavigation').unveil() 

// disable the functionality and show the navigation
$('.unveiled-navigation').data('unveiledNavigation').disable()

// re-enable the functionality
$('.unveiled-navigation').data('unveiledNavigation').enable()

Change log:

2016-04-19

• Add enable/disable functionality

2015-02-26

• 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.