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

Question

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

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

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

Answer 1

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

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（全屏）

Answer 2

您提到您使用了 jQuery 插件，我不知道您是否尝试过jQuery waypoints插件，您可以通过将偏移选项传递给插件来轻松使用此插件，如下所示：

// by default your element will be hidden
$('div').hide();
// call waypoint plugin
$('div').waypoint(function(event, direction) {
    // do your fade in here
    $(this).fadeIn();
}, {
   offset: function() {
       // The bottom of the element is in view
       return $.waypoints('viewportHeight') - $(this).outerHeight();
    }
});

offset：确定元素顶部必须距浏览器窗口顶部多远才能触发航点。它可以是一个数字，以像素数为单位，可以是一个表示视口高度百分比的字符串，也可以是一个返回像素数的函数。

所以在前面的例子中，你的 div 不会淡入，除非它在页面的中间。