我的h1不在页面上。
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
我想在用户滚动到h1或在浏览器视图中触发警报时触发。
$('#scroll-to').scroll(function() { alert('you have scrolled to the h1!'); });
我该怎么做呢?
您可以计算offset元素的,然后将其与scroll值进行比较,例如:
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 无提示-而是将FadeIn()元素
更新了代码,以检查元素是否在视口内。因此,无论您向上滚动还是向下滚动向if语句添加一些规则,此方法都有效:
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){ //Do something }
jsfiddle