Auto Show / Hide Elements On Scroll Using jQuery - navToggle

navToggle is a really simple jQuery plugin which makes any element (typically header navigation) auto hide at a given distance when scrolling down and reveals it again on scroll up.

See also:

• jQuery Plugin To Auto Show Site Navigation On Scroll Up - topbar
• Smart Header Navigation Plugin With jQuery - Toggle NavBar
• Auto Show/ Hide Sticky Header Plugin With jQuery - stickEmUp
• jQuery Plugin To Auto Show / Hide Site Header - cb-slideheader.js
• Responsive Auto Show/Hide Toggle Menu with jQuery

How to use it:

1. Put jQuery library and the jQuery navToggle plugin's script at the bottom of the html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="navToggle.js"></script>

2. Create a header navigation for your webpage.

<nav class="navbar">
  <h3>Header Navigation Here</h3>
</nav>

3. Make the header navigation fixed on the top using CSS.

nav {
  position: fixed;
  z-index: 1000;
  height: 40px;
  width: 100%;
}

4. Call the plugin on the header navigation and specify the distance in pixels.

$.navToggle({
  selector: ".navbar"
  distance: 100
})

5. The plugin also provides 2 animation types from which you can choose for the header navigation when hiding or revealing.

$.navToggle({
  selector: ".navbar"
  distance: 100,
  animate: "fade" // or 'slide'
})

6. Adjust the animation speed in milliseconds.

$.navToggle({
  selector: ".navbar"
  distance: 100,
  animate: "slide",
  time: 500
})

---

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