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

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

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

Сергей усатюк Сергей усатюк
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>
Владимир Мицкевич Владимир Мицкевич
27 июля 2020 в 13:10
0
function is_fully_shown(target) {
var wt = $(window).scrollTop();
var wh = $(window).height();
var eh = $(target).height();
var et = $(target).offset().top;

if (et >= wt && et + eh <= wh + wt){
return true;
} else {
return false;
}
}
$(window).scroll(function(){
$('.active').each(function(){
if (is_fully_shown($(this))) {
// ...
}
});
});

$(document).ready(function(){
$('.active').each(function(){
if (is_fully_shown($(this))) {
// ...
}
});
});
Артём Мосс Артём Мосс
30 мая 2020 в 19:51
0
Почему в примере про частично отображаемый блок, не работает второй раз события, но это происходит именно в мобильном браузере (проверял на встроенном android и последний google chrome для мобильного)

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

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

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает...
15242
+1
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
7759
+10
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
22731
+13
Ниже приведенная функция getPosition() получает текущие координаты курсора. Используя ее в разных jQuery событиях можно получить координаты клика или координаты курсора когда он находится над...
7742
0
Сборник методов jQuery для управления элементами DOM.
2337
+2
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
17473
+9