我有一个位于页面下方的 h1..
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
我想在用户滚动到 h1 或将其显示在浏览器 View 中时触发警报。
$('#scroll-to').scroll(function() {
alert('you have scrolled to the h1!');
});
我该怎么做?
最佳答案
您可以计算元素的 offset
,然后将其与 scroll
值进行比较,例如:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
}
});
检查这个 Demo Fiddle
已更新 Demo Fiddle没有警报——取而代之的是 FadeIn() 元素
更新代码以检查元素是否在视口(viewport)内。因此,无论您是向上滚动还是向下滚动,都可以向 if 语句添加一些规则:
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
//Do something
}
关于javascript - 当用户滚动到特定元素时触发事件 - 使用 jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58433955/