Плагин headroom.js позволяет совершать манипуляции с элементами страницы, путем применения определенных классов css, при попадании их в область видимости страницы.


Зачем ее следует использовать?

Фиксированные заголовки позволяют располагать навигацию сайта вблизи к полю зрения пользователя. Этот приём позволяет облегчить перемещение пользователя по сайту и улучшить юзабилити сайта.

Большие экраны, как правило пейзаж-ориентированные, то есть имеют меньше вертикального пространства. Поэтому фиксированный заголовок может занимать значительную часть области содержимого. Небольшие экраны обычно используются в портретной ориентации. Хотя это приводит к увеличению вертикального пространства, но из-за общей высоты экрана по сравнению с размерами заголовка может возникнуть наложение.

Headroom.js позволяет приблизить элементы в поле зрения пользователя, когда это необходимо, и передать фокус на содержание вашего сайта в остальное время.

Особенности применения headroom.js

В параметрах подключения плагина указываются классы придаваемые выбранному элементу в различных его состояниях.

  • — класс сss при инициализации объекта - параметр initial
  • — класс при прокрутке страницы вверх - параметр pinned
  • — класс при прокрутке страницы вниз - параметр unpinned
  • — класс при достижении верхней границы окна браузера - параметр top
  • — класс при нахождении вне верхней границы окна браузера - параметр notTop

Рейтинг:  5 / 5