Появление элемента в области просмотра браузера

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jQuery scrollTop(), height(), outerHeight() и offset().

$(window).scroll(function(){
	var wt = $(window).scrollTop();
	var wh = $(window).height();
	var et = $('элемент').offset().top;
	var eh = $('элемент').outerHeight();
	var dh = $(document).height();   
	if (wt + wh >= et || wh + wt == dh || eh + et < wh){
		console.log('Элемент показан');
	}
});
JS
16.02.2019 , обновлено 23.11.2019

Комментарии 2

Сергей усатюк Сергей усатюк
26 марта 2020 в 13:43
0
Спасибо, полезная статья, но я хотел бы узнать как это все проделать если на странице несколько блоков Active?
  <div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
<div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
<div class="block">Content</div>
<div class="active">Active</div>
<div class="block">Content</div>
Артём Мосс Артём Мосс
30 мая 2020 в 19:51
0
Почему в примере про частично отображаемый блок, не работает второй раз события, но это происходит именно в мобильном браузере (проверял на встроенном android и последний google chrome для мобильного)

, чтобы добавить комментарий.

Другие публикации

Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
03.12.2016
12455
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
3478
+6
Получить координаты курсора
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над...
01.02.2017
4930
0
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018
15245
+7
Кнопки прокрутки страницы вверх и вниз jQuery
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
13.06.2019
4531
+1
Манипуляции с элементами jQuery
Сборник методов jQuery для управления элементами DOM.
28.01.2020
945
+1