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