Clear and Set interval in JQuery using scrollTop

Question

I want to set and clear the interval, when I scroll(reach) to specific divs, however, it does not work with scrollTop.

It should clear/stop the interval when I scroll down to the second div but it won't stop and keeps going.

JQuery:

function imageSlide() {
    $('#my-image').fadeOut(1000).fadeIn(1000);
  }


$(window).scroll(function() {
    var scroll_top = $(document).scrollTop();
    var fisrt_div_top = $('#first-div').position().top;
    var second_div_top = $('#second-div').position().top;

    if(scroll_top >= fisrt_div_top && scroll_top < second_div_top){
      intervalID = setInterval(imageSlide, 2000);
    }
    if(scroll_top > second_div_top){
        clearInterval(intervalID);
    }
});

Answer 1

You're setting the interval more than once. You need to check to make sure you haven't already set it in this condition.

 if(scroll_top >= fisrt_div_top && scroll_top < second_div_top){
      intervalID = setInterval(imageSlide, 2000);
    }

Something like this.

function imageSlide() {
  console.log('image slide is happening');
}


$(window).scroll(function() {
  var scroll_top = $(document).scrollTop();
  var fisrt_div_top = $('#first-div').position().top;
  var second_div_top = $('#second-div').position().top;

  if(
    scroll_top >= fisrt_div_top &&
    scroll_top < second_div_top &&
    window.intervalID === undefined
  ){
    window.intervalID = setInterval(imageSlide, 2000);
  }
  if(scroll_top > second_div_top){
    clearInterval(window.intervalID);
  }
});

html {
  overflow-y: scroll; /* Show vertical scrollbar */
  overflow-x: scroll; /* Show horizontal scrollbar */
  height: 9000px !important;
  width: 9000px !important;
}

#first-div {
  position: absolute;
  top: 100px;
  height: 100px;
  border: 1px black solid;
}

#second-div {
  position: absolute;
  top: 300px;
  height: 100px;
  border: 1px black solid;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

  <div id="first-div">div one</div>
  
  <div id="second-div">div two</div>