使用 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 (将#修改为@）