当用户滚动到特定元素时使用jQuery触发事件
我有一个远远低于一页的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值进行比较，如：
$(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!'); } });
检查这个演示提琴
更新演示提琴没有警报 – 而是FadeIn（）元素
更新后的代码，检查元素是否在视口内。 因此，无论您是向上滚动还是向下向if语句添加一些规则，都可以工作：
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){ //Do something }
演示小提琴
当用户滚动浏览页面的某个部分时，将这个问题与jQuery触发操作的最佳答案结合起来
var element_position = $('#scroll-to').offset().top; $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var scroll_pos_test = element_position; if(y_scroll_pos > scroll_pos_test) { //do stuff } });
UPDATE
我已经改进了代码，以便在元素在屏幕上方而不是在顶部时触发。 如果用户点击屏幕底部并且function尚未触发，它也会触发代码。
var element_position = $('#scroll-to').offset().top; var screen_height = $(window).height(); var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function var activation_point = element_position - (screen_height * activation_offset); var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer //Does something when user scrolls to it OR //Does it when user has reached the bottom of the page and hasn't triggered the function yet $(window).on('scroll', function() { var y_scroll_pos = window.pageYOffset; var element_in_view = y_scroll_pos > activation_point; var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view; if(element_in_view || has_reached_bottom_of_page) { //Do something } });
我认为你最好的select是利用一个现有的库来做这件事情：
http://imakewebthings.com/jquery-waypoints/
您可以将侦听器添加到元素，当您的元素触碰到视口的顶部时，这些元素将触发。
$('#scroll-to').waypoint(function() { alert('you have scrolled to the h1!'); });
对于使用中的一个惊人的演示：
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
Inview图书馆触发事件，并与jquery 1.8及更高版本运作良好！ https://github.com/protonet/jquery.inview
$('div').on('inview', function (event, visible) { if (visible == true) { // element is now visible in the viewport } else { // element has gone out of viewport } });
阅读此https://remysharp.com/2009/01/26/element-in-view-event-plugin
这应该是你需要的。
使用Javascript：
$(window).scroll(function() { var hT = $('#circle').offset().top, hH = $('#circle').outerHeight(), wH = $(window).height(), wS = $(this).scrollTop(); console.log((hT - wH), wS); if (wS > (hT + hH - wH)) { $('.count').each(function() { $(this).prop('Counter', 0).animate({ Counter: $(this).text() }, { duration: 900, easing: 'swing', step: function(now) { $(this).text(Math.ceil(now)); } }); }); { $('.count').removeClass('count').addClass('counted'); }; } });
CSS：
#circle { width: 100px; height: 100px; background: blue; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; float:left; margin:5px; } .count, .counted { line-height: 100px; color:white; margin-left:30px; font-size:25px; } #talkbubble { width: 120px; height: 80px; background: green; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; float:left; margin:20px; } #talkbubble:before { content:""; position: absolute; right: 100%; top: 15px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 20px solid green; border-bottom: 13px solid transparent; }
HTML：
<div id="talkbubble"><span class="count">145</span></div> <div style="clear:both"></div> <div id="talkbubble"><span class="count">145</span></div> <div style="clear:both"></div> <div id="circle"><span class="count">1234</span></div>
检查这个bootply： http : //www.bootply.com/atin_agarwal2/cJBywxX5Qp
你可以像这样使用jQuery插件和inview事件：
jQuery('.your-class-here').one('inview', function (event, visible) { if (visible == true) { //Enjoy ! } });
链接： https ： //remysharp.com/2009/01/26/element-in-view-event-plugin
只需对DaniP的答案进行快速修改，即可处理元素的任何人都可以超出设备的视口范围。
添加了一个轻微的条件 – 在比视口大的元素的情况下，一旦上半部分完全填充了视口，元素将被显示。
function elementInView(el) { // The vertical distance between the top of the page and the top of the element. var elementOffset = $(el).offset().top; // The height of the element, including padding and borders. var elementOuterHeight = $(el).outerHeight(); // Height of the window without margins, padding, borders. var windowHeight = $(window).height(); // The vertical distance between the top of the page and the top of the viewport. var scrollOffset = $(this).scrollTop(); if (elementOuterHeight < windowHeight) { // Element is smaller than viewport. if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) { // Element is completely inside viewport, reveal the element! return true; } } else { // Element is larger than the viewport, handle visibility differently. // Consider it visible as soon as it's top half has filled the viewport. if (scrollOffset > elementOffset) { // The top of the viewport has touched the top of the element, reveal the element! return true; } } return false; }
如果你正在做很多基于滚动位置的function，Scroll magic（ http://scrollmagic.io/ ）完全是为此目的而构build的。
它可以很容易地根据用户在滚动时到达某些元素的情况来触发JS。 它还与GSAPanimation引擎（ https://greensock.com/ ）集成，这对于视差滚动网站来说非常有用
您可以将其用于所有设备，
$(document).on('scroll', function() { if( $(this).scrollTop() >= $('#target_element').position().top ){ do_something(); } });
