В этой статье рассмотрим замечательный плагин который позволяет определить любой элемент или блок на странице в зоне видимости экрана браузера, имя ему appear.js
Данный плагин вызывает любое ваше событие или действие когда нужный элемент появляется в области видимости экрана, в основном при скролле страницы.
Рассмотрим парочку примеров:
1 2 3 4 5 6 7 8 9 10 | // Инициализируем плагин $('.class').appear(); // Когда класс class появляется в области видимости экрана срабатывает нужный нам код. $('.class').on('appear', function(event, $all_appeared_elements) { // тут выполнится код когда появится элемент в область видимости }); // Когда класс class исчезнет из области видимости экрана опять же сработает нужный нам код. $('.class').on('disappear', function(event, $all_disappeared_elements) { // тут выполнится код когда элемент исчезнет из области видимости }); |
Так же в плагине имеются полезные атрибуты для тега: data-appear-top-offset и data-appear-left-offset.
1 2 3 4 5 | // Плагин сработает увидит этот элемент за 600 пикселев заранее чем он находится в действительности, если указать -600 то соответственно на 600 пикселев ниже(элемент будет видно, но плагин пока не сработает) <div class="postloader" data-appear-top-offset="600">...</div> // Работает аналогично как и с data-appear-top-offset <div class="postloader" data-appear-left-offset="600">...</div> <p> |
Иногда бывает что нам нужно проверить какой-либо элемент на странице, есть ли он в зоне видимости или нет и к нам на помощь приходит функция force_appear()
1 2 3 4 | $('#somebtn').on('click', function() { // функция force_appear() определяет элементы которые уже находятся в видимой части экрана $.force_appear(); }); |
Так же этот плагин предоставляет пользовательский фильтр проверки элементов:
1 | $('.class').is(':appeared') |
Друзья, теперь вы можете читать и комментировать мои записи и на Я.ру — djDell!