当 div 对 jQuery 的访问者可见时触发事件？答案

【问题标题】：Fire event when div is visible to visitor with jQuery?当 div 对 jQuery 的访问者可见时触发事件？
【发布时间】：2011-12-24 10:13:46
【问题描述】：

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

我现在该怎么做：我正在使用这个很好的脚本 (http://code.google.com/p/jquery-appear/)，当用户可以看到一个 div 时，它可以很好地触发一个 jquery 事件。但是它只触发一次。因此，如果您向下滚动页面，jquery 就会正常执行。但是，如果我向上滚动然后再次向下滚动，它不会触发。这是我的jQuery：

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

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

有人知道我该怎么做吗？

【问题讨论】：

标签： jquery html css

【解决方案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
}

【讨论】：

当使用你的脚本时，我在控制台中遇到这样的错误：a.style is undefined Weird?
@Paparappa 根据bugs.jquery.com/ticket/9434 它已在 jQuery 1.7 中修复 :)

【解决方案2】：

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

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

【讨论】：

此代码不起作用，但是如果我进入出现的 .js 文件并将其中的一个更改为 false，我的问题就解决了。所以你的回答不仅仅是激励我去解决它。

【解决方案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
  }
});

【讨论】：

【解决方案4】：

This 可能对你有用。

不管怎样，你可以不用插件而是用一个简单的表达式来代替：

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 (e.g. it is directly visible)
}

【讨论】：