Событие триггера, когда пользователь просматривает конкретный элемент - с помощью jQuery

Ответ 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
   }

Демо-скрипт

Ответ 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
    }
});

Ответ 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/

Ответ 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

Ответ 5

Это должно быть то, что вам нужно.

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>

Установите этот флажок: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp

Ответ 6

Вы можете использовать плагин 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

Ответ 7

Просто быстрое изменение ответа 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 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;
}

Ответ 8

Если вы выполняете большую функциональность на основе положения прокрутки, Scroll magic (http://scrollmagic.io/) построена целиком для этой цели.

Это упрощает запуск JS на основе того, когда пользователь достигает определенных элементов при прокрутке. Он также интегрируется с движком анимации GSAP (https://greensock.com/), который отлично подходит для прокрутки сайтов с параллаксом.

Ответ 9

Вы можете использовать это для всех устройств,

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