javascript - if statement run when condition fail bind with window scroll event -
info
i trying build 1 page website where, when user scroll bit, automatically snap next section, logic here
- get scroll top of section,
- find nearest section,
- depending on direction of scroll
please see complete code here http://jsfiddle.net/e3fed8sw/ commented out goto() function b/c break site. please uncomment before try.
question:
why goto() still run when fail direction test?
i think might 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 = []; = 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 { } }); } );
there's 2 problems checkscrolldirection function:
- it reinitialize
lastscrolltopeverytime, doesn't remember last value - you never assign current
stvaluelastscrolltopbecause assignement done afterreturnstatement.
to fix it:
- make
lastscrolltopvariable global (declare outside function body) - don't assign new value every call of function
- assign current
stvalue 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"; } }
Comments
Post a Comment