Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то jQuery скролл до элемента. В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:
Начнем, пожалуй с HTML разметки и здесь нет ничего необычного. Все довольно просто и понятно. Большое полотно текста, внизу футер и блок с кнопкой, который будет появляться. Вот код блока:
1
2
3
4
5
6
7
8
9
10
<html><body>
Здесь много контента...
<divid="block">
Какой-то текст.
<inputtype="button"class="but"value="Закрыть"/></div><divid="footer">Footer</div></body></html>
<html>
<body>
Здесь много контента...
<div id="block">
Какой-то текст.
<input type="button" class="but" value="Закрыть"/>
</div>
<div id="footer">Footer</div>
</body>
</html>
Теперь займемся оформлением нашего скрытого блока и его кнопки:
Теперь займемся непосредственно, что называется jQuery scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.
$(document).ready(function(){var $element = $('.footer');
let counter =0;
$(window).scroll(function(){var scroll = $(window).scrollTop()+ $(window).height();//Если скролл до конца елемента//var offset = $element.offset().top + $element.height();//Если скролл до начала елементаvar offset = $element.offset().topif(scroll > offset && counter ==0){
$('#block').fadeIn(500);
counter =1;}});
$('.btn').click(function(){
$('#block').slideUp();});});
$(document).ready(function(){
var $element = $('.footer');
let counter = 0;
$(window).scroll(function() {
var scroll = $(window).scrollTop() + $(window).height();
//Если скролл до конца елемента
//var offset = $element.offset().top + $element.height();
//Если скролл до начала елемента
var offset = $element.offset().top
if (scroll > offset && counter == 0) {
$('#block').fadeIn(500);
counter = 1;
}
});
$('.btn').click(function(){
$('#block').slideUp();
});
});
По умолчанию событие срабатывает, как только начало элемента, в данном случае футера, появляется в зоне видимости, но можно поменять значение, раскомментировав 7 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.
Вот таким хитрым способом можно показывать посетителям сайта ваше уникальное предложение и добавив в метрике цели, отслеживать его конверсию.
11896
![Youtube канал Александр Маврин](/files/img/youtube_subscribe.jpg")
Спасибо за информацию. Такая технология есть на многих сайтах. Например deadlylaugh.ru