Как сделать липкий хедер
Разрабатываем анимированный «липкий» header при помощи CSS3 и jQuery
Этот тренд начался с боковых панелей, но сегодня его популярность доросла и до заголовочных частей (header) веб-сайта. Почему? Потому что зачастую в заголовочных частях расположено меню навигации.
Сегодня мы хотим рассказать вам о том, каким образом можно закрепить заголовочную часть сайта вверху окна просмотра, но таким образом, чтобы оно не преграждало остальной контент, когда пользователь начинает прокручивать страницу.
Давайте взглянем на то, разработкой чего мы сегодня займемся.
HTML для нашего примера довольно прост. Все, что нам нужно, это h1 внутри header. Ниже него у нас будет изображение, которое вынуждает посетителей прокручивать страницу, что позволит нам протестировать эффект.
CSS-переходы – это лучший способ управления анимацией, которую нужно применить к нашей липкой заголовочной части. Все, для чего мы используем jQuery, это определение расположения скроллинга на странице (scroll position).
Это значит, что у нас будет возможность стилизовать заголовочную часть на основе того, был ли применен класс ‘sticky’.
Важно указать на то, что в данном примере нам довольно хорошо помогает jQuery, но при этом имеется отличный запасной вариант. Если поддержка javascript будет отключена, навигация все равно будет работать, так как header будет оформлен как обычная заголовочная часть любого веб-сайта.
Наш CSS-код используется для стилизации два разных положения: положения default, и положения ‘sticky’. И между этими двумя положениями нет никакого перехода.
Для начала давайте добавим несколько простых стилей, которые улучшают внешний вид нашей заголовочной части:
Теперь перейдем к самому интересному: когда пользователь прокручивает страницу, к header применяется класс ‘sticky’, и теперь у нас появляется возможность оформить его иначе, переопределив приоритет внимания на странице. Мы также задаем фиксированное позиционирование, чтобы его расположение не изменялось.
Здесь нам нужно сделать несколько вещей: прежде всего, нам нужно изменить размер, что позволило бы занять меньше места на экране. А также нужно изменить цвет и выставить выравнивание по левому краю, чтобы визуально этот элемент не мешал пользователям:
В целом, то, что вы решите сделать здесь, зависит от дизайна, который вам нужно получить. А так можно делать все, что вам захочется, конечно же.
Если вы сейчас протестируете то, что получается, то увидите, что заголовочная часть изменяется при прокрутке страницы.
Теперь, чтобы анимировать это изменения, все что нам нужно сделать, это выставить переход для header:
Благодаря возможности использовать CSS3-свойства и переключать классы при помощи jQuery, разработка анимированных заголовочных частей стала невероятно простой задачей.
Что еще следует отметить, так это то, что код отлично адаптируется под различные ситуации.
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях: