Question

The goal of my script is that when user scrolls down, my page should scroll to the next div. For this, the script distinguishes if the user scrolls up and down. After, when he scrolls, it should remove the class active of my first div and add to the next. Then it’s scrolling to the new div with the class active. The problem is that it’s working for the first scroll only, not the next.

My code:

$(window).load(function() {
    var tempScrollTop, currentScrollTop = 0;
    var $current = $("#container > .active");
    var next = $('.active').next();
    var prev = $('.active').prev();

    $(window).scroll(function() {
        currentScrollTop = $(window).scrollTop();

        if (tempScrollTop < currentScrollTop) { //scrolling down 
            $current.removeClass('active').next().addClass('active'); 
            $.scrollTo(next, 1000);
        }
        else if (tempScrollTop > currentScrollTop ) { //scrolling up
            $current.removeClass('active').prev().addClass('active');
            $.scrollTo(prev, 1000);
        }

        tempScrollTop = currentScrollTop;
    }); 
});

Can anybody help me?

Answer 1

I found the answer

var lastScrollTop = 0;
var isDoingStuff = false;

$(document).scroll(function(event) {
    //abandon 
    if(isDoingStuff) { return; }

    if ($(this).scrollTop() > lastScrollTop) {
        //console.log('down');
        $('.active').removeClass('active').next('div').addClass('active');
        isDoingStuff = true;
        $('html,body').animate( {scrollTop: $('.active').offset().top }, 1000, function() {
            setTimeout(function() {isDoingStuff = false;}, 100);
            console.log('off');
        });
    } else {
        //console.log('up');
    }
    lastScrollTop = $(this).scrollTop();
})​