Мода на разные элементы дизайна приходит и уходит. Те элементы дизайна, которые решают определённые проблемы, держаться дольше других.  Элементы дизайна, которые популярны сейчас именно по этой причине, — это липкие элементы; это те элементы, которые ведут себя нормально до тех пор, пока мы не начинаем пролистывать страницу, и тогда они, тем или иным способом, поддерживают свою видимость на странице.

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

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

Вот как это будет выглядеть, как, когда мы закончим.

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

HTML

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

jQuery

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

Когда положение прокрутки окна больше, чем 1 – это означает, что пользователь прокрутил вниз – тогда мы хотим добавить класс «sticky» в заголовок; в противном случае мы хотим удалить его (если он уже добавлен ранее).

Это означает, что мы сможем задавать стиль заголовку в зависимости от того, применён ли к нему класс «sticky».

Важно отметить, что использование JQuery таким образом позволяет избежать проблемы; если JavaScript отключен, навигация будет работать, заголовок будет просто всё время в своём дефолтном состоянии.

CSS

Наш CSS используется для стилизации двух разных состояний: состояние по умолчанию и также «липкое» состояние; а также для перехода между двумя состояниями.

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

Теперь самое интересное: когда пользователь прокручивает вниз, «sticky» класс будет применён, и теперь мы можем изменить стили заголовка в соответствии с новыми приоритетами отображения на странице. Мы также установим position на fixed, чтобы расположение не менялось при скроллинге.

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

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

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

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

Заключение

Создание этого анимированного заголовка со свойствами CSS3 и переключением класса с JQuery чрезвычайно просто, и добавляет тонну хорошего опыта взаимодействия в дизайн вашего сайта.

Более того, изящна решается проблема с нерабочим JavaScript, таким образом, действительно реализация не страдает.


Хотите узнать, как заполучить короткий и красивый адрес электронной почты (e-mail)? или как выбрать качественный хостинг? Всё это и многое другое на сайте codeby.net.  Подписывайтесь на нашу e-mail рассылку (внизу страницы) или на ленту новостей и вы узнаете первым о новых статьях! Также вступайте в нашу официальную группу вконтакте — там вам очень рады!

Поделитесь этой статьёй с друзьями, если хотите выхода новых статей:

Похожие темы

Новости софта от 20 октября 2014 года (Apache, jQu... Apache 2.4.10 GA Обновился любимейший сервер Apache. Полный список изменений огромен, вы можете ознакомиться с ним здесь. Октябрь 2014: ...
Фонд jQuery усыновляет плагин Mousewheel... Фонд jQuery рад сообщить, что Брэндон Аэрон (Brandon Aaron) передал его плагин jquery-mousewheel в Фондj Query. Брэндон — выпускник команды jQ...
15 маст хэв jQuery-сниппетов, которые взбодрят ваш... Честно говоря, кодинг на JavaScript может быть настоящим геморроем, причём постоянным. Тем не менее, на заре jQuery весь этот ужас остался в пр...
jQuery 3.0: Следующие поколения В это трудно поверить, прошло уже почти восемь лет как был выпущен jQuery. Веб-разработка значительно изменилась за эти годы, и jQuery изменился вме...
Новости софта от 13 февраля 2015 года (jQuery, Ver... jQuery UI 1.11.3 Вышла третья версия jQuery UI из линейки 1.11. Пакет с темами для этой версии можете скачать по этой ссылке: http://jqueryui.co...