Jquery making things happen while side scrolling (scrollto.js) - only works if scrolling slowly

Question

On a horizontal parallax site using jquery scrollTo(awesome...) Am attempting to use the windowsize values AND scrollLeft values in making decisions knowing the current page width - even if resized. That's all working.

When certain window widths are hit or moved through while scrolling left to right, I want to eventually set a value on nav items to provide guidepost to the next mark. Using alerts/test codes as shown below to verify that my points are hitting. And they are - IF SCROLLING REALLY SLOW.

Any ideas on catching these numbers cleanly and reliably? Seems like it's firing so fast that jquery just not getting it. Or am I not viewing this correctly?

function parallaxScroll(){

    var scrolledX = $(window).scrollLeft();
    var windowsize = $(window).width();

    var win0 = 0;
    var win1 = windowsize;
    var win2 = windowsize * 2;
    var win3 = windowsize * 3;

    if (scrolledX == win1) {
        $("#test").text("mark1");
    }
    if (scrolledX == win2) {
        $("#test").text("mark2");
    }
    if (scrolledX == win3) {
        $("#test").text("mark3");
    }

}

Answer 1

It's really hard to catch an exact size. Look for the size, and anything larger - for example, if win1 is 100, it'll fire at 100-199, then for win2 if it's at 200-299, and so on.

Note I also check the window sizes largest to smallest (you can do them smallest to largest, then just be sure to change > to < and add an extra check for sizes larger than win3.

Also, make your checks if ... else if ... else statemnts so you don't accidentally fire it multiple times (win3 is larger than win2, so win2 would fire even at win3).

function parallaxScroll(){

  var scrolledX = $(window).scrollLeft();
  var windowsize = $(window).width();

  var win0 = 0;
  var win1 = windowsize;
  var win2 = windowsize * 2;
  var win3 = windowsize * 2;

  if (scrolledX >= win3) {
    $("#test").text("mark3");
  }
  else if (scrolledX >= win2) {
    $("#test").text("mark2");
  }
  else {
    $("#test").text("mark1");
  }

}