hide-on-scroll

Simple script to hide a navigation bar on scroll down and reveal it on scroll up

Install

Install the module from npm

npm i hide-on-scroll --save

Usage

I suggest to bundle the module with browserify

browserify your-main-javascript-file.js > bundle.js

So that in your-main-javascript-file.js you can just require() or import it.

/*! your-main-javascript-file.js */
import hideOnScroll from 'hide-on-scroll';
// or
var hideOnScroll = require('hide-on-scroll');

To actually make it work, you have two options

1. Just call the default exported function

   import hideOnScroll from 'hide-on-scroll';
   // or
   var hideOnScroll = require('hide-on-scroll');
   
   hideOnScroll({
   	navbarSelector: '.nav',
   	hidingClass: 'hidden'
   });

   This will execute the code on DOMContentLoaded (wrapped by jQuery's $(document).ready())

2. Execute the code when you need it

   import {hideOnScroll} from 'hide-on-scroll';
   // or
   var hideOnScroll = require('hide-on-scroll').hideOnScroll;
   
   function doSomething() {
   	// ...
   	hideOnScroll({
   		navbarSelector: '.nav',
   		hidingClass: 'hidden'
   	});
   	// ...
   }

Options

hideOnScroll({
	// (string) a CSS, Sizzle-parsable selector to grab your navbar
	navbarSelector: '.nav',
	// (string) a CSS class that is applied when hiding the navbar
	// OR (boolean) "false" to use inline styles to hide it
	hidingClass: 'hidden',
	// (integer, default: 200) milliseconds between scrolling status checks
	pollingInterval: 200
});

How it works

Code is pretty easy and self-documenting. Anyway the code is heavily based on this article by Marius Craciunoiu.

Issues?

Open an issue here on GitHub and notify me on Twitter

License

MIT