Приклади jQuery – Фіксовані елементи UI
Одним із найпопулярніших сучасних трендів у веб-дизайні є фіксовані елементи сторінки. Такі елементи особливо зручні разом з іншим сучасним трендом у веб-дизайні – вертикальна розмітка сторінки, тобто коли всі розділи сторінки вишиковуються по вертикалі. Такі сторінки можуть бути досить великими і прокручування на них може бути досить скрутним.
Фіксоване меню навігації
Наприклад, дуже зручно використовувати головне меню, яке фіксується на екрані при зміщенні сторінки вниз. При цьому якщо сторінка досить далеко йде вниз, то таке меню може стати справжнім порятунком.
У цій статті ми розглянемо таке навігаційне меню, яке автоматично спливатиме на сторінці, якщо вона буде досить далеко прокручена вниз. Реалізацію такого меню ми здійснимо за допомогою технології jQuery.
У jQuery існує дивовижна подія scroll , яка визначає в який момент починається прокручування того чи іншого блоку або документа в цілому.
Розглянемо приклад використання цієї події:
В даному випадку scroll реагує на прокручування сторінки і при кожному виникненні цієї події змінює css властивість top панелі навігації на місцезнаходження верха сторінки щодо вікна браузера за допомогою дії scrollTop().
Таким чином, фіксована навігаційна панель вже готова. При будь-якому значенні прокручування сторінки панель завжди буде вгорі.
Ускладнимо наш приклад і поставимо початкове положення панелі навігації. Тепер завдання полягає в тому, щоб фіксувати положення цієї панелі тільки в тому випадку, якщо прокручування дійде до певного місця в документі.
Змінимо логікунашого скрипту і будемо додавати клас fixed панелі навігації в тому випадку, якщо верх сторінки ще не досяг положення панелі.
Якщо ця точка ще не досягнута, то скрипт прибиратиме визначення класу fixed , і панель розташовуватиметься в потоці документа.
Розглянемо отриманий скрипт:
Як видно, обробник події scroll перевіряє позицію вікна щодо відступу меню зверху, і якщо позиція досягнута, то блоку меню додається клас fixed , який закріплює меню зверху.
Потім перевіряється, чи був вже заданий клас fixed , і чи було вікно прокручено повз те місце, де повинна розташовуватися панель. Для цього скрипт звертається до заданого атрибуту data. Якщо ці умови задовольняються, просто видаляємо клас fixed і панель відображається в потоці документа.
Швидка прокрутка
Створимо ще один фіксований елемент – кнопку швидкого повернення до сторінки. Часто такі кнопки використовуються на сторінках, де нескінченне підзавантаження контенту. Ця кнопка повинна з'являтись лише в тому випадку, коли користувач прокрутив частину контенту.
У цьому випадку знову скористаємося подією scroll і створимо для нього новий оброблювач для відображення кнопки в потрібний момент.
Даний скрипт перевіряє, як далеко вниз промотана сторінка, і якщо ця відстань перевищує 300 пікселів, то плавно відображає на сторінці приховану кнопку з посиланням. Якщо сторінка промотана нижче 300 пікселів, кнопка плавно ховається.
Тепер необхідно створити обробник для події click за цим посиланням. По-перше, потрібно зупинити виконання стандартного переходу за цим посиланням, а по-друге, зробити плавну прокрутку до початку документа.
Для реалізації цієї функції можемо скористатися наступнимскриптом:
Проаналізуємо цей скрипт. Як селектор ми вибрали формат атрибута. У квадратних дужках необхідно вказати значення атрибуту href , елементи з яким будуть відібрані для обробки.
Далі все, що нам необхідно – це анімувати плавне переміщення вмісту сторінки нагору. Це робиться досить просто, за допомогою функції animate(), яка плавно змінює значення властивості scrollTop.