Auto Show / Hide Elements On Scroll Using jQuery - navToggle

File Size: 3.47 KB
Views Total: 2727
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="//"></script>
<script src="navToggle.js"></script>

2. Create a header navigation for your webpage.

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

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.

  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.

  selector: ".navbar"
  distance: 100,
  animate: "fade" // or 'slide'

6. Adjust the animation speed in milliseconds.

  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.