JQuery渐入窗口滚动效果的目标元素的问题

Trouble with targetting elements for the JQuery fade-in on window scroll effect

本文关键字：目标 元素 问题 窗口 滚动 JQuery      更新时间：2023-09-26

我正在尝试应用元素淡出的效果，当页面向下滚动到一个水平，他们将是可见的。

更具体地说，我试图在垂直时间轴上瞄准盒子。

这是时间线的结构。

<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>

以上大部分元素的CSS样式如下:

.when{
    @extend .what;
    background:#393F43;
    color:#ddd;
    .title{
        color:#ddd;
    }
    .timeline{
    padding:20px;
    position:relative;
    color:black;
        &:before{
            content: "";
            width:5px;
            height:100%;
            background:silver;
            position: absolute;
            top:0;
            left:50%;
        }
        .entry{
            padding:20px;
            border-radius:2px;
            background:#ecf0f1;
            width:auto;
            max-width:500px;
            color:gray;
            position: relative;
            margin-top:20px;
            p{font-size:14px;}
            &:before{
                content: "";
                position:absolute;
                right:0;
                padding:5px;
                left:500px;
                width:35px;
                height:35px;
                background: url(../imgs/arrow.png) no-repeat;
            }
            .circle-glyph{
                background:silver;
                padding:15px;
                width:45px;
                position:absolute;
                left:545px;
                top:10px;
                span{
                    display:block;
                    text-align:center;
                }
            }
            .date-title{
                height:23px;
                div{
                    &:nth-child(1){
                        font-size:15px;
                        font-weight: bold;
                    }
                    &:nth-child(2){
                        text-align:right;
                        font-style:italic;
                        font-size:11px;
                    }
                }
            }
            &:not(:first-child):nth-child(odd){
                margin-top:210px;
            }
            &:nth-child(even){
                float:right;
                .circle-glyph{
                    left:-125px;
                    top:10px;
                }
                &:before{
                content: "";
                position:absolute;
                right:0;
                padding:5px;
                left:-35px;
                width:35px;
                height:35px;
                background: url(../imgs/arrow.png) no-repeat;
                -moz-transform: scaleX(-1);
                -o-transform: scaleX(-1);
                -webkit-transform: scaleX(-1);
                transform: scaleX(-1);
                filter: FlipH;
                -ms-filter: "FlipH";
                }
            }
        }
    }
}

生成以下内容:http://piclair.com/data/4xkqg.jpg

当前在我的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);
        }
    });
});

^我没有创建上面的脚本。

我已经测试过了，它在独立元素上工作得很好，例如，如果我将它应用于:<div class="bg-success fade pad-20">Hello</div>

无论我对多少个对象应用这个效果，它都能单独工作。

我遇到的问题是，一旦一个被script.js

中的脚本检测到，褪色效果就会被触发为每一个<div class="entry fade">

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

非常感谢您的帮助

我遇到的问题是，褪色效果被触发为每一个单独的<div class="entry fade">，只要一个是由脚本在script.js检测到。

也许你的意思是他们都在同一时间消失。我做了一个脚本，当div的底部击中我的例子中的某个标记时，它们会逐渐消失。我不知道这是不是你想要的。我刚把position改成了offset。

$(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)
                }
            })
        })
http://jsfiddle.net/8s1cscq5/

我正在学习滚动事件。

相关文章：