使用jQuery访问者可以看到div时的fire事件？

function：我想在用户看到某个div（向下滚动到它）时更改某个项目的类。

我现在该怎么做：我正在使用这个很好的脚本（ http://code.google.com/p/jquery-appear/ ），当div对用户可见时，它可以正常触发jquery事件。 然而它只发射一次。 因此，如果向下滚动页面，jquery就可以正常执行了。 但是，如果我向上滚动然后再向下滚动它会发生火灾。 这是我的jquery：

$('#myDiv').appear(function() { $("#aDiv").addClass("active"); }); 

我想做的事情：每当“myDiv”出现时让脚本执行，而不仅仅是第一个。

有没有人知道如何做到这一点？

Answer 1

判断div是否可见，你可以：

 $(window).scroll(function(event) { console.log($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight()); }); 

所以，我认为你不需要任何插件。

只需用以下表达式来判断它：

 if($(".target").offset().top < $(window).scrollTop() + $(window).outerHeight()) { // something when the .target div visible } else { // something when the .target div invisible } 

Answer 2

通过查看jquery-appear插件的源代码，可以传递参数one ，仅触发事件一次（ one: true ），或每次出现一次（ one: false ）

 $('#myDiv').appear(function() { $("#aDiv").addClass("active"); }, { one: false }); 

Answer 3

我使用类似的插件，但这使用bind方法并使用事件 – > http://remysharp.com/2009/01/26/element-in-view-event-plugin/

样品用法：

 $('div').bind('inview', function (event, visible) { if (visible == true) { // element is now visible in the viewport } else { // element has gone out of viewport } }); 

Answer 4

这可能对你有用。

无论如何，你可以在没有插件的情况下使用简单的表达式来代替：

 var elem_top = $("some_element").offset().top; var elem_height = $("some_element").height(); var wind_height = $(window).height(); var scrollTop = $(window).scrollTop; if (elem_top > (wind_height + scrollTop) && !(elem_top + elem_height) < wind_scrollTop) { //The element is inside the screen (eg it is directly visible) }