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

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

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

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

(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")){
            'Элемент вышел за верхний край экрана';
        }
    });
});
Количество показов: 3370
28.02.2019

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

Если вам была полезна статья можете отблагодарить автора:
Ethereum:

0x16Df809287333C49D3A237296C6248A6c08702Bc

Разработка сайта

Подайте заявку на разработку сайта на базе готового решения от компании 1С-Битрикс или одного из партнеров компании. Максимально подробно опишите, чему будет посвящен сайт, если это интернет-магазин - что он будет продавать, нужна ли мультиязычность, будут ли разные типы цен (розница, опт, крупный опт), будет ли интеграция с 1С, будет ли выгрузка товаров на различные торговые площадки...

Сопровождение сайта

Вы можете подать заявку на сопровождение вашего сайта на базе 1С-Битрикс. Сопровождение включает в себя: проверка актуальности обновлений сайта, проверка актуальности резервной копии, консультации по сайту. Опишите в заявке, какие еще объемы планируются на сопровождении и на какой срок вы планируете заключить договор на сопровождение - мы подберем подходящий вам бюджет на сопровождение

Работы по сайту

Вы можете подать заявку на выполнение определенного объема работ по сайту. Опишите в заявке объем работ. Это может быть разработка какого-то нового функционала, доработки по имеющемуся функционалу, доработки под требования сео-специалистов. На основании заявки вам будет сформирован бюджет работ, а также названы сроки на выполнение тех или иных работ.