—»     —»   Разрабатываем анимированный «липкий» header при помощи CSS3 и jQuery
  Раздел: Руководства   Нет комментариев  

Разрабатываем анимированный «липкий» header при помощи CSS3 и jQuery



Тренды приходят и уходят. Некоторые из них закрепляются в сфере, так как позволяют решать определенные проблемы. И именно по этой причине на сегодняшний день существует одна интересная тенденция - «липкие» элементы. Это такие элементы, которые остаются нормальными до тех пор, пока мы не начнем прокручивать страницу, так как после этого они, не зависимо от расположения области просмотра, сохраняют свою позицию на экране.

Этот тренд начался с боковых панелей, но сегодня его популярность доросла и до заголовочных частей (header) веб-сайта. Почему? Потому что зачастую в заголовочных частях расположено меню навигации.

Разрабатываем анимированный «липкий» header при помощи CSS3 и jQuery

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

Давайте взглянем на то, разработкой чего мы сегодня займемся.

Если вы хотите следить за кодом по ходу руководства, то полный код можно скачать здесь.

HTML-код

HTML для нашего примера довольно прост. Все, что нам нужно, это h1 внутри header. Ниже него у нас будет изображение, которое вынуждает посетителей прокручивать страницу, что позволит нам протестировать эффект.

<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />

jQuery-код

CSS-переходы – это лучший способ управления анимацией, которую нужно применить к нашей липкой заголовочной части. Все, для чего мы используем jQuery, это определение расположения скроллинга на странице (scroll position).

Когда scroll position превышает значение 1, - это значит, что пользователь прокрутил первоначальное окно просмотра до самого низа, и после этого нам нужно задать header’у класс ‘sticky’. В обратном же случае, этот класс нужно удалить.

Это значит, что у нас будет возможность стилизовать заголовочную часть на основе того, был ли применен класс ‘sticky’.

$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});

Важно указать на то, что в данном примере нам довольно хорошо помогает jQuery, но при этом имеется отличный запасной вариант. Если поддержка javascript будет отключена, навигация все равно будет работать, так как header будет оформлен как обычная заголовочная часть любого веб-сайта.

CSS-код

Наш CSS-код используется для стилизации два разных положения: положения default, и положения ‘sticky’. И между этими двумя положениями нет никакого перехода.

Для начала давайте добавим несколько простых стилей, которые улучшают внешний вид нашей заголовочной части:

header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}

Теперь перейдем к самому интересному: когда пользователь прокручивает страницу, к header применяется класс ‘sticky’, и теперь у нас появляется возможность оформить его иначе, переопределив приоритет внимания на странице. Мы также задаем фиксированное позиционирование, чтобы его расположение не изменялось.

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

header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}

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

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

Теперь, чтобы анимировать это изменения, все что нам нужно сделать, это выставить переход для header:

transition: all 0.4s ease;

В завершение

Благодаря возможности использовать CSS3-свойства и переключать классы при помощи jQuery, разработка анимированных заголовочных частей стала невероятно простой задачей.

Что еще следует отметить, так это то, что код отлично адаптируется под различные ситуации.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery
Опубликовал Design FactoRy   Прочитано (раз): 8062   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Февраль 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728