如何解决使用 jquery 为许多 div 滚动淡入和淡出
在滚动每个 div 时应该淡入淡出。 但实际上,它正在重叠。 所以,我尝试了这种方法,通过给出一个固定的高度,它必须为每个 div 淡入和淡出。即使它没有按预期工作。
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
if ($(this).scrollTop() > 600)
$('#1').stop().fadeOut();
else
$('#1').stop().fadeIn();
}
if ($(this).scrollTop() > 600) {
if ($(this).scrollTop() > 1000)
$('#2').stop().fadeOut();
else
$('#2').stop().fadeIn();
}
if ($(this).scrollTop() > 1000) {
if ($(this).scrollTop() > 1400)
$('#3').stop().fadeOut();
else
$('#3').stop().fadeIn();
}
if ($(this).scrollTop() > 1400) {
if ($(this).scrollTop() > 1900)
$('#4').stop().fadeOut();
else
$('#4').stop().fadeIn();
}
if ($(this).scrollTop() > 1900) {
if ($(this).scrollTop() > 2400)
$('#5').stop().fadeOut();
else
$('#5').stop().fadeIn();
}
if ($(this).scrollTop() > 2400) {
if ($(this).scrollTop() > 2800)
$('#6').stop().fadeOut();
else
$('#6').stop().fadeIn();
}
if ($(this).scrollTop() > 2800) {
if ($(this).scrollTop() > 3200)
$('#7').stop().fadeOut();
else
$('#7').stop().fadeIn();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="scrollData">
<div id="1"> jquery fadein and fadeout </div>
<div id="2"> jquery fadein and fadeout </div>
<div id="3"> jquery fadein and fadeout </div>
<div id="4"> jquery fadein and fadeout </div>
<div id="5"> jquery fadein and fadeout </div>
<div id="6"> jquery fadein and fadeout </div>
<div id="7"> jquery fadein and fadeout </div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。