Auto Show / Hide Elements On Scroll Using jQuery - navToggle

Auto Show / Hide Elements On Scroll Using jQuery - navToggle
File Size: 3.47 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.