在视口中将类添加到 div答案

【问题标题】：Add class to div when in viewport在视口中将类添加到 div
【发布时间】：2014-01-19 08:52:27
【问题描述】：

当不同的 div 进入视口时，我想向菜单项添加一个类。

我已经成功复制了此处的警报：http://jsfiddle.net/blowsie/M2RzU/ 但是，当我尝试将其从警报更改为 addClass 或 toggleClass 时，它会中断。这是我的代码：

$('#portfolio').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
    $( "#menu-item-portfolio" ).addClass( ".active-area" );
  } else {
    // element has gone out of viewport
  }
});`

我想在#portfolio 进入视口时将.active-area 添加到#menu-item-portfolio，然后在#portfolio 离开视口时将其删除。

【问题讨论】：

要在哪个元素上添加和删除类。
我想在#portfolio 进入视口时将.active-area 添加到#menu-item-portfolio，然后在#portfolio 离开视口时将其移除。

标签： jquery function viewport

【解决方案1】：

您应该在文档就绪时触发事件inview。

$('.myclass').trigger('inview');

Working Fiddle

在 fiddle 中查看控制台的变化。

【讨论】：

【解决方案2】：

我找到了解决方案。代码中有错字。代替 .addClass(".active-area") 它应该是 .addClass("活动区域")

【讨论】：

【解决方案3】：

试试这个

$(document).ready(function(){
$('.myclass').bind('inview', function (event, visible) {
  if (visible == true) {
    // element is now visible in the viewport
   $("h2").removeClass('myclass');
      alert('found h2!')
  } else {
    // element has gone out of viewport
     $("h2").addClass('myclass');
  }
});
});

演示

http://jsfiddle.net/M2RzU/24/

【讨论】：