当用户滚动到该 div 时，JQuery 淡入该 div

Question

一个元素 <div class="">当用户向下滚动到该 div 时将淡入。

我找到了一个使用 jQuery 插件的解决方案和另一个检查 div 在页面上是否可见的解决方案。有用。

但是，一旦用户滚动到 div 顶部，它就会很快淡入，因此用户看不到 div 淡入。如何使 div 仅在用户滚动到顶部时淡入div 底部以便用户可以看到整个 div 的漂亮淡入效果？

Answer 1

此 JavaScript 代码可能与您当前使用的代码类似，唯一的区别是使用的偏移量，即目标元素的 offset().top() + 元素的 height() 。演示代码淡出几个<li>元素底部进入 View 。

tiles = $("ul#tiles li").fadeTo(0,0);

$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

演示: jsfiddle.net/Marcel/BP6rq (fullscreen)