Question

我有一个元素列表，当它们位于可见屏幕区域的顶部（例如距顶部200像素）时，我尝试向其中的每个元素添加一个类。

这是我到目前为止的代码：

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

但是，它似乎并没有达到我的期望。实际上，它似乎什么也没做。

上面的jQuery和我的html和css的精简版本在这里：

https://jsfiddle.net/1t92vcym/6/

视口顶部的.grid-item背景应该变成绿色。

Answer 1

$Scripts不是jQuery的正确标识符。
您还缺少窗口的scroll事件处理程序。

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

$(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

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

1 个答案: