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

Отследить появление блока при скроллинге можно с помощью события 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

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

Сергей усатюк Сергей усатюк
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>

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

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

Фиксированная шапка таблицы при прокрутке
Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
03.12.2016
11423
+1
Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
12.12.2019
1568
+6
Получить координаты курсора
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над...
01.02.2017
3826
0
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018
11875
+7
Кнопки прокрутки страницы вверх и вниз jQuery
Несколько примеров как сделать кнопки прокрутки страницы вверх и вниз. Для скроллинга используется jQuery функция...
13.06.2019
3028
0
Как сделать интерактивную схему на SVG + jQuery
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017
12201
+7