Проверка того, что блок ушел за верхний край экрана

Проверка того, что блок ушел за верхний край экрана

11
28.02.2019

Понадобилось мне тут отслеживать событие, когда блок при прокручивании страницы, уходило за верхний край экрана. 

Чтобы понять, вышел ли элемент за края экрана, необходимо сравнить на сколько сильно прокручен экран, с положением элемента в документе, и размерами элемента.

На просторах интернета был найден скрипт, который позволяет такую проверку выполнить. Этот скрипт немного расширил под свою задачу и привожу для вашего внимания:

(function($) {
	$.extend($.expr[':'], {
		'off-top': function(el) { // проверка того, что элемент достиг верха экрана
			return $(el).offset().top < $(window).scrollTop();
		},
		'off-top-height': function(el) { // проверка того, что весь элемент ушел за верхний край экрана
			return ($(el).offset().top+$(el).outerHeight()) < $(window).scrollTop();
		},
		'off-right': function(el) { // проверка того, что элемент ушел за правый край
			return $(el).offset().left + $(el).outerWidth() - $(window).scrollLeft() > $(window).width();
		},
		'off-bottom': function(el) { // проверка того, что элемент ушел за нижний край
			return $(el).offset().top + $(el).outerHeight() - $(window).scrollTop() > $(window).height();
		},
		'off-left': function(el) { // проверка того, что элемент ушел за левый край
			return $(el).offset().left < $(window).scrollLeft();
		},
		'off-screen': function(el) { // элемент вышел из области видимости экран
			return $(el).is(':off-top, :off-right, :off-bottom, :off-left');
		}
	});
})(jQuery);

Теперь, чтобы проверить, ушел ли элемент при скроллинге за верхнюю границу, проверяем:

$(document).ready(function () {
    $(document).scroll(function () {
        if($('div.some_element').is(":off-top-height")){
            'Элемент вышел за верхний край экрана';
        }
    });
});


Благодарю за внимание! Делитесь вашими замечаниями в комментариях ниже.


P.S. Обращайтесь ко мне за приобретением лицензий и продлений на 1C-Битрикс "Управление сайтом", лицензий на облачную и коробочную версии Битрикс 24 а также за приобретением и внедрением готовых решений на базе 1С-Битрикс от партнеров. За более подробной информацией свяжитесь со мной любым удобным для вас способом


Комментарии

Еще никто не комментировал данную публикацию. Будьте первыми!

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

captcha

Возврат к списку