if statement run when condition fail bind with window scroll event

Question

INFO

I am trying to build a one page website where, when user scroll a bit, it automatically snap to the next section, my logic here is to

1. get all scroll top of section,
2. find the nearest section,
3. depending on the direction of scroll

please see complete code here http://jsfiddle.net/e3fed8sw/ I commented out the goTo() function b/c it break the site. please uncomment it before you try.

QUESTION:

why goTo() still run when it fail the direction test?

I think this might be where the problem is.

function checkScrollDirection(){
    var lastScrollTop = 0, delta = 0;
    var st = $(this).scrollTop();

if(Math.abs(lastScrollTop - st) <= delta)
    return false;

if (st > lastScrollTop){
// downscroll code
    return "down";
} else {
// upscroll code
    return "up";
}
    lastScrollTop = st;
}

DOM READY

$(document).ready(
    function() {

        var onePageLoacations = []; 

        $('.onePage').each(
            function(index, el) {
                onePage($(el));
                var onePageLoacation = getOnePageLocation($(el));
                    onePageLoacations.push(onePageLoacation);
            }
        );

        $(window).on('scroll', function(event) {

            var currentPos = $(window).scrollTop(),
                direction = checkScrollDirection();
                onePageCount = onePageLoacations.length, 
                topPosArray = [];
                i = 0;                      

                console.log('is traveling '+direction);

            for(i; i<onePageCount; i++) {
                topPosArray.push(onePageLoacations[i][0]);
            }

            var closestCord = closest(topPosArray,currentPos), 
                pageNumber = topPosArray.indexOf(closestCord),  // 0 base
                currentPage = $('.onePage').eq(pageNumber),
                nextPage = currentPage.next('.onePage');

                if(direction==="down") {
                    var currentThreshold = closestCord + 50;
                    if(currentPos > currentThreshold) {
                        goTo(currentPage, nextPage);
                        console.log('goto active');
                    } else {
                        console.log('condition not met');
                    }
                } else {

                }
        });

    }
);

Answer 1

There's two problems with your checkScrollDirection function:

1. It reinitialize your lastScrollTop everytime, so it doesn't remember the last value
2. You never assign the current st value to lastScrollTop because the assignement is done after the return statement.

To fix it:

• Make your lastScrollTop variable global (declare it outside the function body)
• Don't assign a new value to it every call of the function
• Assign the current st value to it correctly

Code:

var lastScrollTop = 0;
function checkScrollDirection(){
    var delta = 0;
    var st = $(this).scrollTop();

    if(Math.abs(lastScrollTop - st) <= delta)
        return false;

    if (st > lastScrollTop){
        lastScrollTop = st;
        return "down";
    } else {
        lastScrollTop = st;
        return "up";
    }        
}