当项刚好在屏幕顶部以下时添加悬停效果
当项刚好在屏幕顶部以下时添加悬停效果
提问于 2018-09-13 09:28:46
我有一个元素列表，当它们位于可视屏幕区域的顶部时，我尝试向每个元素添加一个类，比如从顶部的200 of。
这是我到目前为止掌握的代码：
$(".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项的背景应该是绿色的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-09-13 09:34:25
$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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52310707
复制相关文章
相似问题
腾讯云开发者
