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.
import hideOnScroll from 'hide-on-scroll';
var hideOnScroll = require('hide-on-scroll');
To actually make it work, you have two options
-
Just call the default exported function
import hideOnScroll from 'hide-on-scroll';
var hideOnScroll = require('hide-on-scroll');
hideOnScroll({
navbarSelector: '.nav',
hidingClass: 'hidden'
});
This will execute the code on DOMContentLoaded (wrapped by jQuery's $(document).ready()
)
-
Execute the code when you need it
import {hideOnScroll} from 'hide-on-scroll';
var hideOnScroll = require('hide-on-scroll').hideOnScroll;
function doSomething() {
hideOnScroll({
navbarSelector: '.nav',
hidingClass: 'hidden'
});
}
Options
hideOnScroll({
navbarSelector: '.nav',
hidingClass: 'hidden',
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