CODEWITHSUNDEEP
jquery
user282294
user282294

Reputation:

do something when scroll up and something else when scroll down in jquery

I want to add a little down arrow on my website when users scroll down and an arrow pointing up when they scroll up.

The only thing I managed to do is this 

$(document).ready(function(){
    $(window).scroll(function () {
        $("#bottomArrow").show(); 
        setTimeout(function(){ $("#bottomArrow").fadeOut() }, 2000);
    });
});

which does not recognize the up and down, just the "scroll".

How can I do this with jQuery?

Upvotes: 4

Views: 1482

Answers (1)

Tatu Ulmanen
Tatu Ulmanen

Reputation: 124758

You need to check which way $(document).scrollTop() has changed. You could do something like this:

$(function() {

    var prevScroll = $(document).scrollTop();

    $(window).scroll(function() {
        var newScroll = $(document).scrollTop();
        if(newScroll < prevScroll) {
            // Scrolled up
        } else {
            // Scrolled down
        }
        prevScroll = newScroll;
    });
});

Testcase here:

http://jsbin.com/arazu3/

Upvotes: 5

Related Questions