jQuery событие при прокрутке до определенного элемента (футера)

  Александр Маврин   Комментариев нет

событие прокрутки страницы jquery

Привет, друзья. В этой статье мы с вами разберем jQuery событие при прокрутке страницы до определенного элемента. Если говорить другими словами, то jQuery скролл до элемента. В этом примере мы вызовем событие, когда страница будет прокручена до футера. Тогда будем выводить небольшое всплывающее окно с плавным появлением. А так же будем закрывать его по клику. Что в него поместить, решайте сами, вариантов масса. Вот как это выглядит:

Демо

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

1
2
3
4
5
6
7
8
9
10
<html>
 <body>
 Здесь много контента...
  <div id="block">
    Какой-то текст.
    <input type="button" class="but" value="Закрыть"/>
  </div>
  <div id="footer">Footer</div>
 </body>
</html>

Теперь займемся оформлением нашего скрытого блока и его кнопки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#block{
	display: none;
	position: fixed;
	top: 15px;
	right: 15px;
	color: #fff;
	background: #4CAF50;
	padding: 10px;
	border-radius: 5px;
	width: 200px;
	box-shadow: 0 13px 20px -5px #3a3a3a;
	font-family: Arial;
	text-align: center;
}
.btn{
    background: #FF9800;
    border: 2px solid #795548;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    padding: 5px 10px;
    margin-top: 10px;
    font-weight: bold;
}

Теперь займемся непосредственно, что называется jQuery scroll to element. Все-таки английский язык для разработчика необходим. Стандартно подключаем jQuery. Я сделаю это через CDN, так как это будет самая актуальная версия.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

А затем сам код скрипта, который и будет творить магию на странице:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$(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 строку и тогда функция сработает, когда прокрутка дойдет до конца элемента.

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

Добавить страницу в закладки

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

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