Question

好的，所以当用户将其滚动到视图中时，我一直在搜索简单方式淡入div，但我无法找到直接解决方案。< / p>

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/

Answer 1

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

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

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

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

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

Answer 2

我发现库AOS对此非常有用（https://github.com/michalsnik/aos#-animations）。此外，当div进入视口时淡入，其他效果也可用。见下面的例子

shift([], []).
shift([H|T], L) :-
   append(T, [H], L).

shift(0, L, L) :- !.
shift(N, L1, L2) :-
   N1 is N-1,
   shift(L1, L),
   shift(N1, L, L2).

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

享受！：）

当它滚动到视口时淡入div

3 个答案: