Прокрутка страницы jQuery. Узнать положение

Прокрутка страницы jQuery. Узнать положение

Сегодня мы напишем скрипт, который поможет нам определять положение страницы или иначе: прокрутил пользователь страницу или нет.

Суть в следующем: при прокрутке имеется необходимость в определенный момент произвести действие (скрыть верхнее меню или отобразить боковую колонку). Но сделать это требуется не сразу, а если пользователь прокрутит страницу, например на 150px.


Что-то похожее (под названием "Плавающие блоки" мы делали тут). Но проблема в том, что тот скрипт уже устарел и срабатывает не всегда. Так вот, если он не работает, то вам пригодится свежий.

Для начала по традиции создадим структуру - это 2 обычных блока div:

<div class="header"></div>
<div class="content"></div>

Теперь зададим для них стили (заранее укажу лишний класс для будущего скрипта):

body {
	margin:0;
}
.header {
	height:200px;
	background:yellow;
}
.fixed {
	height:100px;
	width:100%;
	position:fixed;
	background:green;
}
.content {
	height:10000px;
	background:blue;
}

Давайте напишем скрипт, который будет присваивать блоку с классом header класс fixed, если мы прокрутим страницу на 50px:

$(window).on("scroll", function() {
    if ($(window).scrollTop() > 50) $('.header').addClass('fixed');
          else $('.header').removeClass('fixed');
    });

Из стилей мы можем понять, что если это произойдет, то блок header зафиксируется сверху, станет в 2 раза меньше по высоте и поменяет цвет. Проверяем - ураааа!:) Работает. P.S. Предварительно не забудьте подключить библиотеку jQuery.

Полный код страницы:

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>Прокрутка страницы jQuery. Узнать положение</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(window).on("scroll", function() {
    if ($(window).scrollTop() > 50) $('.header').addClass('fixed');
          else $('.header').removeClass('fixed');
    });
</script>
<style>
body {
	margin:0;
}
.header {
	height:200px;
	background:yellow;
}
.fixed {
	height:100px;
	width:100%;
	position:fixed;
	background:green;
}
.content {
	height:10000px;
	background:blue;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
</body>
</html>

26.03.17
Для просмотра сайта обновите браузер.