Question

到目前为止我发现的 - 并且喜欢和使用 - 是：

单击here（之前的stackoverflow任务。）

或查看已编辑的演示:(由Jai）

$(document).ready(function(){
    //hold box offsets from top
    yArr = new Array();
    for(var i=1; i<$(".box").size(); i++){
        yArr[i] = $('#box' + i).offset().top;
    }    

    //checks if box is off screen
    function boxOffScreen(i){
        if ((yArr[i] - $(window).scrollTop()) < 20) return true;
        return false;
    }
    
    //animates box
    function boxAnimate(animateTo, i){
        if(animateTo == "fade"){
            $('#box' + i).stop().fadeTo(100, 0);
        } else{
            $('#box' + i).stop().fadeTo('fast', 1);
        }
    }
    
    //checks if it needs to fade/unfade
    function triggerAnimate(i){
        if (boxOffScreen(i)){
            boxAnimate("fade", i); 
            return;
        }
        boxAnimate("unfade", i);
    }
    
    $(window).scroll(function () {
        for(var i=0; i<$(".box").size(); i++){
            triggerAnimate(i);
        }
    });  
});

.box{
    width: 350px;
    height: 200px;
    background: #8AC9D0;
    margin:50px auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
<div id="box3" class="box"></div>
<div id="box4" class="box"></div>
<div id="box5" class="box"></div>
<div id="box6" class="box"></div>

Demo

但我想在页面底部添加淡入和淡出。目标是完全看到2或3个元素和即将到来的元素（当你向下滚动时）或前一个元素（当你再次向上滚动时）顺利淡入。

任何想法，任何代码或提示？

非常感谢。

Answer 1

以下是检查元素是否低于屏幕底部的方法：

$element.offset().top + $element.height() > $(window).scrollTop() + $(window).height()

请在此处查看：JSFiddle

在向上和向下滚动时淡出淡入淡出元素

1 个答案: