Scrollmptious is a jquery plugin that lets you determine scroll direction and run code accordingly. Scroll up, run one function, Scroll down, run another.
Download the production version or the development version.
<nav> <span>Select any Element, but its gotta have a fixed position</span> </nav> <script src="jquery.js"></script> <script src="dist/scrollmptious.min.js"></script>
$('nav').scrollmptious();
nav { position: fixed; top: 0; left: 0; height: 50px; width: 100vw; transition: top 0.2s ease-in-out; }
Instead of using the default action, (hiding and displaying your top navbar or whatever you put at the top of the screen really) You can hook into the plugins scroll action and run your own custom code on scroll. An example might be if you have a top and bottom navbar you want to hide and display, you could write a couple functions to run on up and down actions.
var scrollUp = function(){ $('body').addClass('hide-navs'); } var scrollDown = function(){ $('body').removeClass('hide-navs'); } $('body').scrollmptious({ upFunction: scrollUp, downFunction: scrollDown });
Technically it doesnt matter which element you target with jquery if youre using your own code, but you should try to target a single element and not a collection of elements if youre going that route.
v 1.0.0