Jquery 在元素滚动到屏幕上时立即触发事件
我有一个id为Jquery 在元素滚动到屏幕上时立即触发事件,jquery,html,animation,parallax,Jquery,Html,Animation,Parallax,我有一个id为ig container的元素。我想添加像这样的类 $("#ig-container").addClass("animated bounceInRight"); 当该元素在屏幕上可见时，立即将其复制到该元素。通过这样做，当用户在该元素上滚动时，我可以在该元素上实现动画 我该怎么做 PS：我尝试使用.is（“：visible”），但它没有按照我想要的那样工作，因为这会检查元素是否存在于DOM中。我自己的示例在这里，请确保使用doctype，否则使用$（window）。height（
ig container$("#ig-container").addClass("animated bounceInRight");
PS：我尝试使用.is（“：visible”），但它没有按照我想要的那样工作，因为这会检查元素是否存在于DOM中。我自己的示例在这里，请确保使用doctype，否则使用$（window）。height（）返回文档高度
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
if(($('.diff').offset().top+$('.diff').height()) < ($(window).scrollTop() + $(window).height()))
{
$('.diff').addClass('green');
}
});
});
</script>
<style>
.green { background:#0F0 !important; }
</style>
</head>
<body>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">2</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">3</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">4</div>
<div class="diff" style="min-height:250px; margin-bottom:10px; background:#00F;">THIS ONE</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
<div style="min-height:250px; margin-bottom:10px; background:#F00;">1</div>
</body>
</html>
$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
如果（$（'.diff'）.offset（）.top++$（'.diff'）.height（））<（$（窗口）.scrollTop（）++$（窗口）.height（））
{
$（'.diff'）.addClass（'green'）；
}
});
});
.green{背景：#0F0！重要；}
1.
2.
3.
4.
这个
1.
1.
1.
tomhre听着，我觉得这听起来很合理，或者你可以使用类似或的库。