当项刚好在屏幕顶部以下时添加悬停效果
当项刚好在屏幕顶部以下时添加悬停效果
提问于 2018-09-13 01: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 01: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
复制相关文章
![[Java 并发]读锁/写锁](https://ask.qcloudimg.com/http-save/yehe-4201576/fmcdrb4qxe.png)
Mysql锁相关锁的分类锁的适用场景MyISAM表锁MyISAM写阻塞读的例子MyISAM读阻塞写例子MyISAM并发插入MyISAM读写并发MyISAM锁调度调节MyISAM锁调度行为解决读写冲突的
![Futex系统调用，Futex机制，及具体案例分析[通俗易懂]](https://ask.qcloudimg.com/http-save/yehe-8223537/04b0310d5e37fac685fd18fd4b8f229b.png)
点击加载更多
相似问题
处理多读和单写
读锁写锁
读/写锁
多读和单写线程安全？
文件读/写锁
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
