当视口中出现另一个 div 时，将 Class 添加到 div答案

【问题标题】：Add Class to Div when another div appears in viewport当视口中出现另一个 div 时，将 Class 添加到 div
【发布时间】：2013-10-08 18:48:09
【问题描述】：

请看我的 JS Fiddle...

不知道为什么当我的英雄 div 出现在视口中时，只是尝试添加一个类不起作用。

$(document).ready(function(){
    $('.hero').bind('inview', function (event, visible) {
      if (visible == true) {
        // element is now visible in the viewport
        $('.home').addClass('test');
      } else {
        // element has gone out of viewport
         $('.home').removeClass('test');
      }
    });
});

http://jsfiddle.net/franclowe/KqQds/

【问题讨论】：

定义not working。你的事件被触发了吗？您是否收到任何控制台消息？

标签： jquery

【解决方案1】：

试试这个：https://github.com/schaenk/jquery-in-viewport

if ($('.hero').inViewport()) {
    $('.home').addClass('test');
else {
    $('.home').removeClass('test');
}

【讨论】：

【解决方案2】：

我已经用工作代码更新了你的小提琴：

http://jsfiddle.net/zcZuD/1/

我为解决这个问题所做的事情：

实际上添加jQuery和inview插件作为依赖（不要使用直接链接到github，它不是CDN）
修复了你的 CSS，所以 .test p 是红色的。

【讨论】：