title: Javascript add class on scroll with timeout
body: <p>I'm having some trouble with adding a class when a specified class is scrolled into view with a delay between when the classes are added. </p>
  
  <p>I have three divs, all side by side, all with the class fadeInDownScroll seen in the javascript code.</p>
  
  <p>The onScrollReach function works, and the class fadeInDown is added when reached on scroll, but all three of the divs have this added at the same time. </p>
  
  <p>Below is the javascript code I've been trying to get to work:</p>
  
  <pre><code>function onScrollReach(selector, classToBeAdded, offset, delayTime, callback) {
      var didScroll = false;
      var this_top;
      var height;
      var top;
  
      //If no offset, set one as 0 so that its initialised
      if(!offset) { var offset = 0; } 
      $(window).scroll(function() {
          didScroll = true;
      });
      //Set interval of a tenth of a second, so this will trigger 10 times a second
      setInterval(function() {
          //If they've scrolled within the last 1/10th of a second
          if (didScroll) {
  
          //Prevent retrigger by setting false
          didScroll = false;
          //Get scroll height
          top = $(this).scrollTop();
          //For each of the selector element (class you're looking for)
          $(selector).each(function(i){
              //Set position of where on page you want it to trigger the event
              this_top = $(this).offset().top - offset;
              height   = $(this).height();
  
              // Scrolled within current section &amp; doesn't already have the class
              if (top &gt;= this_top &amp;&amp; !$(this).hasClass(classToBeAdded)) {
              //=$(this).addClass(classToBeAdded);
  
              setTimeout(function(){
                  console.log(delayTime * (i / 2));
                  console.log('class added');
                  $(this).addClass(classToBeAdded);
              }, 100);
              //You can call it with a function so tha tyou can do something else straight after
              //This only applies if thats the case
              if (typeof callback == "function") callback(selector);
              }
          });
          }
      }, 100);
  }
  
  //Target Class, Class to be added, Offset for scroll, Delay Time
  onScrollReach(".fadeInDownScroll", "fadeInDown", 600, 3000, '');
  </code></pre>
  
  <p>I know this is a subject that there are a lot of similar posts, however after reading through a lot of these I could not find one that solved this exact issue</p>