javascript - 使用 scrollTop 在 JQuery 中清除和设置间隔
问题描述
当我滚动(到达)到特定的 div 时,我想设置和清除间隔,但是,它不适用于 scrollTop。
当我向下滚动到第二个 div 时,它应该清除/停止间隔,但它不会停止并继续前进。
查询:
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>
推荐阅读
- html - Adding a favicon to template on Django
- c++ - Github Desktop. Remote end hung up unexpectedly
- mongodb - mongodb 错误:对 node.js 使用未定义的变量
- java - 有没有办法将 SQL 查询转换为 liquibase 更改日志格式?
- c - Changing char* string in a C loop
- python - Getting "You must feed a value for placeholder tensor" error when using Keras model
- php - PHP URL QUERY to array
- java - CSV processor spring boot from compute engine
- vimeo-api - 使用 vimeo API 获取我自己的所有视频链接
- azure - 应用服务不适用于本地 VPN