Scroll direction awareness

by lovromar

HTML

<p>The scroll </p>

CSS

body {
    height:1000px;
    margin:0;
    padding:0;
}
p {
    width:100%;
    height:20px;
    background-color:yellow;
    position:fixed;
}

JavaScript

$(function () {

    // show hide subnav depending on scroll direction
    var position = $(window).scrollTop() + 20;

 $(window).on('scroll', function () {
        var scroll = $(window).scrollTop();

        if (scroll > position) {

       $("p").fadeOut("fast");

            console.log('moving DOWN the page');
        
        } else {
            $("p").fadeIn("fast");
        }

        position = scroll;
    });

});