Question

我正在尝试应用元素淡入的效果，因为页面会向下滚动到可见的级别。

具体来说，我正试图在垂直时间轴上定位方框。

这是时间轴的结构。

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

无论我施加多少效果，它都可以单独使用。

问题

我遇到的问题是，只要<div class="entry fade"> 一个，就会触发每个script.js的淡入淡出效果>

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

非常感谢帮助。

Answer 1

我遇到的问题是，只要script.js中的脚本检测到一个<div class="entry fade">，就会触发淡入淡出效果。

也许你说他们都在同一时间消失。我创建了一个脚本，当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/

我自己正在学习滚动事件。

在窗口滚动效果上使用JQuery淡入的目标元素时出现问题

1 个答案: