Проверить видимость элемента с помощью 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();
	});
	
});

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


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


Оценить:
(2 оценок, среднее: 5,00 из 5)

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

  1. А если таких элементов сотни, с одинаковым классом? Он всем будет добавлять класс? Если даже он не в зоне видимости? Тогда смысл?

    1. Циклом проверять каждый элемент по ключу $(‘.class’)[i]. Если, скажем, 4 элемент уже не виден, значит и следующие не видны — выход из цикла.

  2. var div_x2 = div_left + div_height;
    var div_y2 = div_top + div_width;
    значения вычисляются неправильно
    правильно будет так:
    var div_x2 = div_left + div_width;
    var div_y2 = div_top + div_height;

  3. Циклом выводится товар с уникальным id — #productwrap-889136
    Функцию checkPosition() вставляю в .php в цикл с указанием id
    В файле скриптов .js запускаю checkPosition();
    Вроде все логично…. Почему не работает?

    1. функция checkPosition вызывается при скролле?
      в примере код описывает определение видимости блока с классом example_div. Чтобы отслеживать несколько элементов, нужно код немного доработать

      1. Для начала да, только на скролл.
        Я понимаю, что вопросы по оптимизации кода мод мою задачу немного не уместна здесь.
        Но все же если у Вас есть вариант решения моей задачи прошу направить меня в нужную сторону.
        В цикле товара template.php я вызываю checkPosition на скролл:

        <li id="productwrap-">
        ....
        
                        
                        $(document).ready(function() {
                        $(document).scroll(function () {
                        checkPosition();
                        });
                        
        
        В файле скрипта app.js собственно сама функция:
        function checkPosition(ssp){
                    var ssp = $('#productwrap-'+ssp).attr("data-id");
                    var div_position = $('#productwrap-'+ssp).offset();
        ..........
                    if( div_x1 >= see_x1 && div_x2 = see_y1 && div_y2 <= see_y2 ){
                        $('#productwrap-'+ssp).css({'border': '1px solid green'});
                    }else{
                        $('#productwrap-'+ssp).css({'border': '1px solid red'});
                    }
                }
        

        По сути должна срабатывать своя функция для каждого товара. Но.. Тишина…
        Может в app.js checkPosition надо в цикл?

        1. При скролле Вы вызываете функцию без параметр: checkPosition();
          А в самой функции уже используете параметр ssp:
          function checkPosition(ssp){
          var ssp = $(‘#productwrap-‘+ssp).attr(«data-id»);

          Можно попробовать обойтись вообще без префиксов для id, а использовать один и тот же класс для искомых блоков. Только перебирать их в цикле. Например если общий класс будут .test_block, то получится что-то такое:

          $(".test_block").each(fcuntion(){
          // находим координаты и сверяем их с координатами видимой части страницы
          // и производим необходимые действия с найденным блоком с помошью $(this), например скроем
          $(this).hide();
          });
          
          1. Как все просто оказалось.
            .each() все решил!
            Спасибо за вашу работу, и за обратную связь.

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

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

*

code