Прокрутка страницы 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>