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

  1. get scroll top of section,
  2. find nearest section,
  3. 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:

  1. it reinitialize lastscrolltop everytime, doesn't remember last value
  2. you never assign current st value lastscrolltop because assignement done after return statement.

to fix it:

  • make lastscrolltop variable global (declare outside function body)
  • don't assign new value every call of function
  • assign current st value 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

Popular posts from this blog

javascript - Bootstrap Popover: iOS Safari strange behaviour -

Magento/PHP - Get phones on all members in a customer group -

session - Logging Out Using PHP -