滚动到视口时淡入 div答案

【问题标题】：Fade In div when it's scrolled into viewport滚动到视口时淡入 div
【发布时间】：2014-06-04 12:18:40
【问题描述】：

好的，所以我一直在寻找一种简单的方法来在用户将 div 滚动到视图中时淡入它，但我找不到直接的解决方案。

HTML

<div class="container">

<div class="topdiv">This is a 100% height div. User scrolls down from here.</div>

<div class="fadethisdiv">This content should be faded in 
once .fadethisdiv is [so many]px into the bottom of the viewport.
Let's use 150px as an example.</div>

</div>

CSS

.container {
       width:100%;
       height:600px;
}

.topdiv {
       height:100%;
       background-color:#09f;
       text-align:center;
       font-size:24px;
}

.fadethisdiv {
       height:100%;
       background-color:#36afff;
       text-align:center;
       font-size:24px;
}

// Talk to me.

这是一个小提琴：http://jsfiddle.net/kz2z5/2/

【问题讨论】：

标签： jquery html scroll fadein opacity

【解决方案1】：

这是一个在滚动.topdiv div 后触发fadeIn jQuery 函数的解决方案。

它从scrollTop 函数中减去视口大小以获得滚动位置的底部，然后检查它的值是否大于.topdiv div 的高度加上 150px 或者你想多远喜欢它淡入淡出。

由于 div 最初必须显示在页面上，以便我们可以向下滚动到某个位置，因此我们将 visibility 设置为 hidden，而不是使用 display:none。我们使用fadeIn，它期望元素以display:none 开头，所以我们隐藏.fadethisdiv div 并将其淡入。

然后我们移除滚动侦听器，以便在我们滚动过去 .fadethisdiv div 之后元素不会持续隐藏和 fadeIn。

$(window).scroll(function () {
    console.log($(window).scrollTop());
    var topDivHeight = $(".topdiv").height();
    var viewPortSize = $(window).height();

    var triggerAt = 150;
    var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

    if ($(window).scrollTop() >= triggerHeight) {
        $('.fadethisdiv').css('visibility', 'visible').hide().fadeIn();
        $(this).off('scroll');
    }
});

Fiddle

【讨论】：

唯一的问题是它似乎只适用于顶部 div，然后是它下面的一个 div。您能否修改褪色的 div，然后在其下方淡化另一个相同的 div。例如，将此 div 称为 .seconddiv？谢谢！
为此，我将.topdiv 和.fadethisdiv 的高度加在一起，而不是只加.topdiv。在这种情况下，我为滚动处理程序提供了名称空间，因此只有当前正在淡出的处理程序被删除。 Fiddle

【解决方案2】：

我发现库 AOS 对此非常有用 (https://github.com/michalsnik/aos#-animations)。此外，当您的 div 进入视口时淡入淡出，还可以使用其他效果。请参阅下面的示例

<script src="js/aos.js"></script>
<link href="css/aos.css" rel="stylesheet" />

<div id="content1" data-aos="flip-down" data-aos-delay="0">
     <p>Some content</p>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        AOS.init();
        AOS.refreshHard();  //optional
    });
</script>

【讨论】：

【解决方案3】：

这里是解决方案，设置为 300px

$(document).ready(function(){
var view = {};

var checkPosition = function(){
   var elem = $('.fadethisdiv'), top = elem.offset().top;

                if (top - view.limit < 300) {
                    elem.css('display','none'); 
                }
            };

       $(window).bind('scroll', function() {

            view.top = $(window).scrollTop();
            view.limit = view.top + $(window).height();

            checkPosition();
        }); 

});

http://jsfiddle.net/kz2z5/4/

享受吧！ :)

【讨论】：