使用 scrollTop 在 JQuery 中清除和设置间隔

问题描述

我想设置和清除间隔，当我滚动（到达）到特定的 div 时，但是，它不适用于 scrollTop。

当我向下滚动到第二个 div 时，它应该清除/停止间隔，但它不会停止并继续前进。

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);
    }
});

解决方法

您不止一次设置间隔。您需要检查以确保您尚未将其设置为这种情况。

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

类似的东西。

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>