Javascript 设置JQuery淡入窗口滚动效果的目标元素时出现问题

我试图应用这样一种效果：当页面向下滚动到可见的水平时，元素会淡入

具体来说，我试图以垂直时间线中的框为目标

<div class="container-fluid when">

    <div class="container none">
        <div class="title dark">When?</div>
        <div class="timeline">
            <div class="container none">

              <!-- BOX START -->
                <div class="entry fade">
                    <div class="container-fluid none date-title">
                        <div class="col-md-6 none">The Pledge</div>
                        <div class="col-md-6 none">November 23rd 2011</div>
                    </div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore repellat omnis esse accusantium, distinctio vel fugit provident quae possimus culpa magni deleniti est, aperiam illo exercitationem dolore, assumenda. Quis.</p>
                    <div class="circle-glyph img-circle"><span class="fa fa-envelope"></span></div>
                </div>
             <!-- /BOX END-->

            </div>
        </div>
    </div>  

</div>  

这是时间线的结构

<div class="container-fluid when">

    <div class="container none">
        <div class="title dark">When?</div>
        <div class="timeline">
            <div class="container none">

              <!-- BOX START -->
                <div class="entry fade">
                    <div class="container-fluid none date-title">
                        <div class="col-md-6 none">The Pledge</div>
                        <div class="col-md-6 none">November 23rd 2011</div>
                    </div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum inventore repellat omnis esse accusantium, distinctio vel fugit provident quae possimus culpa magni deleniti est, aperiam illo exercitationem dolore, assumenda. Quis.</p>
                    <div class="circle-glyph img-circle"><span class="fa fa-envelope"></span></div>
                </div>
             <!-- /BOX END-->

            </div>
        </div>
    </div>  

</div>  

这将产生以下结果：

当前，在我的

script.js

文件中，我在加载文档时执行以下代码：

$(window).scroll(function () {

    /* Check the location of each desired element */
    $('.fade').each(function (i) {

        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        /* If the object is completely visible in the window, fade it it */
        if (bottom_of_window > bottom_of_object) {

            $(this).animate({
                'opacity': '1'
            }, 350);
        }
    });
});

^我没有创建上面的脚本

我已经对它进行了测试，它在独立元素上运行良好，例如，如果我将它应用于：

Hello

无论我对多少个应用效果，它都会单独工作

问题

我遇到的问题是，只要

script.js中的脚本检测到一个
，就会触发每个
的淡入淡出效果

我猜这与我如何嵌套不同的div、类和元素有关，但我不太确定

非常感谢你的帮助

我遇到的问题是，script.js中的脚本一检测到任何一个
，就会触发淡入淡出效果

也许你说它们同时消失了。我制作了一个脚本，在这个脚本中，当div的底部达到某个标记时，它们就会淡入我的示例。我不知道这是不是你想要的。我刚刚将
位置
更改为
偏移量

$(window).on("scroll", function(){
            $(".el").each(function(i){
                console.log($(this).offset().top)
                var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();
                $('.display').html("btofWin: " + bottom_of_window + "btmofObj" + bottom_of_object)
                if(bottom_of_window > bottom_of_object){
                    $(this).animate({
                        "opacity" : 1
                    },350)
                }
            })
        })


我自己也在学习滚动事件。
我有一个简单的解决方案，但你也可以提供CSS，或者更好地提供演示，可以是实时的，也可以是实时的。嗯，我将尝试创建一个小提琴。基本上，你必须识别垂直时间线中的最后一个对象，并单独应用jquery！有不同的方法可以做到这一点。一种方法是对要淡入的最后一个元素应用“淡入”类，这意味着其他元素不应该有这个类。一旦最后一个元素在$element.removeClass（“fade”）中消失，立即删除类“fade”。或者另一种方法是在最后一个元素中添加一个类，在jquery代码中，您需要将其作为目标，而不是.fade。但这难道不意味着如果我有一个高度为2000px的时间线，我必须一直滚动到最后一个，以触发所有元素的可见性吗？或者，当我向下滚动时，它们还会一个接一个地消失吗？太好了，这正是我想要的，谁会想到我所要做的就是改变一个单词？！非常感谢您，先生，非常感谢：D，祝您好运，了解更多有关滚动活动的信息。