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

Question

请看我的 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/

Answer 1

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

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

Answer 2

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

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

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

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