Проверить видимость элемента с помощью jquery

Проверить видимость элемента. Введение

Проверить видимость элемента с помощью jqueryСегодня столкнулся с интересной задачей, и о ее решении я хочу рассказать в этой статье.
Задача:
Необходимо поверить видимость элемента на странице. Когда элемент полностью виден на экране, нужно сменить его цвет. Даже если на один пиксель элемент скрыт за пределами страницы, то он считается не видимым.

Решение:
Для решения задачи будем использовать библиотеку jQuery, поэтому не забудьте ее подключить. Напишем функцию, которая будет вызываться при загрузке страницы, при скролленге, при изменении размера окна браузера и при масштабировании страницы. Функция должна определить положение элемента на страницы и его размер. Также функция определит размер видимой области страницы и на сколько было проскролена страница вертикально и горизонтально. Далее, зная все размеры и координаты, добавим в функцию условие, которое проверит — виден элемент или нет. Если виден, то сменим его цвет.

Проверить видимость элемента. Код

Для начала зададим стили для элемента:

.example_div{
	width: 100px;
	height: 100px;
	background-color: red;
	margin-top: 50px;
	margin-left: 50px;
}

Теперь добавим сам элемент на страницу:

<div class="example_div"></div>

Для удобства тестирования, можно добавить до и после элемента несколько
, чтобы страница была длинная — появится скролл.
А теперь самая интересная часть, js:

// функция проверки полной видимости элемента
function checkPosition(){
	// координаты дива
	var div_position = $('.example_div').offset();
	// отступ сверху
	var div_top = div_position.top;
	// отступ слева
	var div_left = div_position.left;
	// ширина
	var div_width = $('.example_div').width();
	// высота
	var div_height = $('.example_div').height();
	
	// проскроллено сверху 
	var top_scroll = $(document).scrollTop();
	// проскроллено слева
	var left_scroll = $(document).scrollLeft();
	// ширина видимой страницы
	var screen_width = $(window).width();
	// высота видимой страницы
	var screen_height = $(window).height();
	
	// координаты углов видимой области
	var see_x1 = left_scroll;
	var see_x2 = screen_width + left_scroll;
	var see_y1 = top_scroll;
	var see_y2 = screen_height + top_scroll;
	
	// координаты углов искомого элемента
	var div_x1 = div_left;
	var div_x2 = div_left + div_height;
	var div_y1 = div_top;
	var div_y2 = div_top + div_width;
	
	// проверка - виден див полностью или нет
	if( div_x1 >= see_x1 && div_x2 <= see_x2 && div_y1 >= see_y1 && div_y2 <= see_y2 ){
		// если виден
		$('.example_div').css({'background-color': 'green'});
	}else{
		// если не виден
		$('.example_div').css({'background-color': 'red'});		
	}
}


$(document).ready(function(){
	$(document).scroll(function(){
		// при скролле страницы делаем проверку
		checkPosition();
	});
	
	// после загрузки страницы сразу проверяем
	checkPosition();
	
	// проверка при масштабировании и изменении размера страницы
	$(window).resize(function(){
		checkPosition();
	});
	
});

Вот и все, если у кого-то возникли сложности, можете скачать готовый, рабочий исходник — тут.

Рассказать друзьям:


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*