Jquery 当项目刚好位于屏幕顶部下方时添加悬停效果

我有一个元素列表，当它们位于可查看屏幕区域的顶部时，我试图为每个元素添加一个类，比如说从顶部开始200px

这是我目前掌握的代码：

$(".grid-item").each(function() {
            var viewableOffset = $(this).offset().top - $(window).scrollTop();
            if ( viewableOffset < 200 ) {
                $Scripts(this).addClass("grid-item-hovered");
      }
});

$（“.grid项”）。每个（函数（）{
var viewableOffset=$（this.offset（）.top-$（window.scrollTop（）；
如果（可视偏移量<200）{
$Scripts（this）.addClass（“网格项悬停”）；
}
});

然而，它似乎并没有达到我的预期。事实上，它似乎什么也没做

上面的jQuery以及我的html和css的精简版本如下：

视口顶部的.grid项的背景应变为绿色

$Scripts

不是jQuery的正确标识符，除非您已经定义了它

此外，您还缺少窗口的

滚动

事件处理程序

因此，对脚本进行一些更改：

$(window).on('scroll', function() { // added
  $(".grid-item").each(function() {
        var viewableOffset = $(this).offset().top - $(window).scrollTop();
        if ( viewableOffset < 200 ) {
          $(this).addClass("grid-item-hovered"); // revised
        }
  });
}); // added

$（窗口）.on（'scroll'，function（）{//已添加
$（“.grid item”）。每个（函数（）{
var viewableOffset=$（this.offset（）.top-$（window.scrollTop（）；
如果（可视偏移量<200）{
$（this）.addClass（“悬停的网格项”）；//修订
}
});
}); // 补充

$Scripts

不是jQuery的正确标识符，除非您已经定义了它

此外，您还缺少窗口的

滚动

事件处理程序

因此，对脚本进行一些更改：

$(window).on('scroll', function() { // added
  $(".grid-item").each(function() {
        var viewableOffset = $(this).offset().top - $(window).scrollTop();
        if ( viewableOffset < 200 ) {
          $(this).addClass("grid-item-hovered"); // revised
        }
  });
}); // added

$（窗口）.on（'scroll'，function（）{//已添加
$（“.grid item”）。每个（函数（）{
var viewableOffset=$（this.offset（）.top-$（window.scrollTop（）；
如果（可视偏移量<200）{
$（this）.addClass（“悬停的网格项”）；//修订
}
});
}); // 补充

就这样，谢谢你，真不敢相信我忽略了这么琐碎的事情。我确实定义了$Scripts，但我打算为了在这里共享它而删除它们，显然错过了那一个。我稍微修改了您的解决方案，以便在用户回滚时删除该类，可以在此处找到代码，以防将来任何人找到此答案时都会用到它。就这样，谢谢你真不敢相信我忽略了这么一件小事。我确实定义了$Scripts，但我打算为了在这里共享它而删除它们，显然错过了那一个。我稍微修改了您的解决方案，以便在用户回滚时删除该类，可以在此处找到代码，以防将来任何人找到此答案时都会用到它。