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

当用户向下滚动到该div时，元素

将淡入。

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

但是，只要用户滚动到div的顶部，它就会很快消失，因此用户无法看到div淡入。如果用户滚动到底部，我该如何使div淡入？ div让用户可以看到整个div的漂亮淡入效果？

Answer 1

你提到你使用了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不会淡入，除非它在页面的中间。

Answer 2

这个javascript代码可能与你目前使用的类似，唯一的区别是使用的偏移量，它只是目标元素的offset().top() +元素的height() 。 当元素的底部进入视图时，演示代码会淡化几个

元素。

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