请问当用户滚动到特定元素时触发事件-使用jQuery

Question

当用户滚动到特定元素时触发事件-使用jQuery

我有一个H1，很远的一页.。

<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>

当用户滚动到h1时，或者在浏览器的视图中，我想触发一个警告。

$('#scroll-to').scroll(function() {
     alert('you have scrolled to the h1!');});

我该怎么做？

Answer 1

把这个问题和最好的答案结合在一起当用户滚动通过页面的某一部分时，jQuery触发操作var&nbsp;element_position&nbsp;=&nbsp;$('#scroll-to').offset().top;$(window).on('scroll',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;y_scroll_pos&nbsp;=&nbsp;window.pageYOffset; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;scroll_pos_test&nbsp;=&nbsp;element_position; &nbsp;&nbsp;&nbsp;&nbsp;if(y_scroll_pos&nbsp;>&nbsp;scroll_pos_test)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//do&nbsp;stuff &nbsp;&nbsp;&nbsp;&nbsp;}});更新我已经改进了代码，以便当元素位于屏幕的一半而不是顶部时触发。如果用户点击屏幕底部，并且该函数尚未启动，它也将触发代码。var&nbsp;element_position&nbsp;=&nbsp;$('#scroll-to').offset().top;var&nbsp;screen_height&nbsp;=&nbsp;$(window).height();var&nbsp;activation_offset&nbsp;=&nbsp;0.5; //determines&nbsp;how&nbsp;far&nbsp;up&nbsp;the&nbsp;the&nbsp;page&nbsp;the&nbsp;element&nbsp;needs&nbsp;to&nbsp;be&nbsp;before&nbsp;triggering&nbsp;the&nbsp;functionvar&nbsp; activation_point&nbsp;=&nbsp;element_position&nbsp;-&nbsp;(screen_height&nbsp;*&nbsp;activation_offset);var&nbsp;max_scroll_height&nbsp;=&nbsp;$('body').height()&nbsp;-&nbsp;screen_height&nbsp;-&nbsp;5; //-5&nbsp;for&nbsp;a&nbsp;little&nbsp;bit&nbsp;of&nbsp;buffer//Does&nbsp;something&nbsp;when&nbsp;user&nbsp;scrolls&nbsp;to&nbsp;it&nbsp;OR//Does&nbsp;it&nbsp;when&nbsp;user&nbsp;has&nbsp;reached&nbsp;the&nbsp;bottom&nbsp; of&nbsp;the&nbsp;page&nbsp;and&nbsp;hasn't&nbsp;triggered&nbsp;the&nbsp;function&nbsp;yet$(window).on('scroll',&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;y_scroll_pos&nbsp;=&nbsp;window.pageYOffset; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;element_in_view&nbsp;=&nbsp;y_scroll_pos&nbsp;>&nbsp;activation_point; &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;has_reached_bottom_of_page&nbsp;=&nbsp;max_scroll_height&nbsp;<=&nbsp;y_scroll_pos&nbsp;&&&nbsp;!element_in_view; &nbsp;&nbsp;&nbsp;&nbsp;if(element_in_view&nbsp;||&nbsp;has_reached_bottom_of_page)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//Do&nbsp;something &nbsp;&nbsp;&nbsp;&nbsp;}});