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

Question

我有一个远远低于页面的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

您可以计算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
   }

演示小提琴

Answer 2

当用户滚动浏览页面的某个部分时,将此问题与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

我改进了代码,以便当元素在屏幕的一半而不是顶部时触发.如果用户点击屏幕底部并且该功能尚未触发,它也将触发代码.

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
    }
});

Answer 3

我认为你最好的办法就是利用现有的库来完成这件事:

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/

Answer 4

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

Answer 5

您可以将其用于所有设备，

$(document).on('scroll', function() {
    if( $(this).scrollTop() >= $('#target_element').position().top ){
        do_something();
    }
});

Answer 6

成功滚动后仅触发滚动一次

注意：成功滚动是指当用户滚动到所需元素时，或者换句话说，当所需元素在视图中时

接受的答案对我来说有 90% 的效果，所以我不得不稍微调整一下以实际只触发一次。

$(window).on('scroll',function() {
    var hT = $('#comment-box-section').offset().top,
    hH = $('#comment-box-section').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
    if (wS > ((hT+hH-wH)-500)){
        console.log('comment box section arrived! eh');
        // This detaches the scroll so doStuff() won't run more than once
        $(window).off('scroll');
        doStuff();
    }
});