当 div 滚动到视口时淡入

好的，所以我一直在寻找simple当用户将其滚动到视图中时淡入 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;
}

JS

// Talk to me.

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

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

它从视口大小中减去scrollTop函数获取滚动底部的位置，然后检查其值是否大于滚动条的高度.topdivdiv 加上 150px 或您希望淡入的距离。

由于 div 最初必须显示在页面上，以便我们有地方可以向下滚动，因此我们设置visibility to hidden而不是使用display:none。我们正在使用fadeIn，它期望元素以display:none，所以我们隐藏.fadethisdivdiv 并将其淡入。

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

$(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 http://jsfiddle.net/9pjaB/