hide navigation bar on scroll down, reveal on scroll up
npm install hide-on-scrollnpm
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.
`js
/! 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
`js
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
`js
import {hideOnScroll} from 'hide-on-scroll';
// or
var hideOnScroll = require('hide-on-scroll').hideOnScroll;
function doSomething() {
// ...
hideOnScroll({
navbarSelector: '.nav',
hidingClass: 'hidden'
});
// ...
}
`
Options
`js
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
});
``