Smart Top Fixed Navigation Menu Plugin With jQuery - scrollmenu

scrollmenu is an ultra-light jQuery navigation plugin used to create a sticky top menu that hides on scroll down and reveals on scroll up. 

How to use it:

1. The jQuery scrollmenu plugin requires jQuery library installed in your web project.

<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="jquery.scrollmenu.js"></script>

2. Create a header navigation menu.

<header class="navigation is-visible">
  Memu
</header>

3. Style the header navigation and make it sticky at the top of the webpage.

.navigation {
  position: fixed;
  top: 0;
  width: 100%;
  height: 50px;
  transition: top .2s ease-in-out;
  background: #333;
  color: white;
}

4. Initialize the plugin.

$('.navigation').scrollMenu();

5. The plugin detect the browser scroll events and automatically adds the CSS class '.is-hidden' to the header navigation when scrolling down. The required CSS to hide the header navigation:

.is-hidden { top: -50px; }

6. Plugin's default options.

$('.navigation').scrollMenu({
    addClassTo: $(this),
  scrollUpClass: 'is-visible',
  scrollDownClass: 'is-hidden',
  scrollTopClass: 'is-top',
  scrollBottomClass: 'is-bottom',
  timeOut: 1000/60,
  tolleranceUp: 5, // Scroll up delta
  tolleranceDown: 5, // Scroll down delta
  scrollOffset: $(this).outerHeight(),
  onScrollMenuUp: function() {},
  onScrollMenuDown: function() {},
  onScrollMenuTop: function() {},
  onScrollMenuBottom: function() {}
});

7. Events.

• onScrollMenuUp: This event is triggered on scroll down
• onScrollMenuDown: This event is triggered on scroll up
• onScrollMenuTop: This event is triggered when scroll reaches top
• onScrollMenuBottom: This event is triggered when scroll reaches bottom
• onScrollMenuOffsetIn: This event is triggered when scroll is in offset
• onScrollMenuOffsetOut: This event is triggered when scroll is out of offset

$( document ).on( 'onScrollMenuDown', function() {
  // Your code here
});

Change log:

2017-05-22

• Fix wrong condition

2016-05-11

• Resolved conflict with jQuery animate

2016-04-04

• Added offset events

2016-04-01

• Added scroll top and bottom events

---

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