CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

scroll down and scroll up event functions

I'm doing the following jquery for learning purpose. I wanted to increase the blue div width when scroll down and decrease when scroll up. Please suggest me where I'm doing wrong.

jQuery:

$(window).scroll(function () {
    var last_scroll = $(window).scrollTop();
    var current_scroll = $(window).scrollTop();
    var changes_scroll = (current_scroll - last_scroll);


if (changes_scroll > 0) {
    $("#slide").width('+=10%');
} else {
     $("#slide").width('-=10%');
}

});

demo

Upvotes: 0

Views: 160

Answers (2)

Rituraj ratan
Rituraj ratan

Reputation: 10378

var last_scroll = $(window).scrollTop();
$(window).scroll(function () {

    var current_scroll = $(window).scrollTop();
    var changes_scroll = (current_scroll - last_scroll);


if (changes_scroll > 0) {
    $("#slide").width('+=10%');
} else {
     $("#slide").width('-=10%');
}
 last_scroll = $(window).scrollTop();

});

see DEMO

Upvotes: 3

Hugo Silva
Hugo Silva

Reputation: 6938

var last_scroll = $(window).scrollTop();
var current_scroll = $(window).scrollTop();

If last_scroll and current_scroll are getting the same value assigned, changes_scroll will allways be zero

Upvotes: 0

Related Questions