Как создать липкий заголовок веб-сайта

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

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

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

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

Что делает его липким?

Фиксированное позиционирование — это ключевой компонент для того, чтобы навигация оставалась на месте. Этот элемент с фиксированной позицией позиционируется относительно области просмотра или самого окна браузера. Поскольку область просмотра не меняется при прокрутке сайта, этот элемент с фиксированным положением останется на том же месте при прокрутке страницы.

Примечание. Не пытайтесь повторить это на своем действующем сайте.

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

Как заставить навигацию оставаться на одном месте?

Сделать навигацию «прилипчивой» не может быть проще; это просто сделано с помощью стилей CSS. В основном это выглядит примерно так:

 [CSS]

.navbar-фиксированная вершина {

положение: фиксированное;

справа: 0;

слева: 0;

z-индекс: 999;

}

[/css]

Независимо от того, насколько длинна ваша страница или сколько раз вы прокручиваете вверх и вниз, навигация будет «застрять» в верхней части страницы. В навигацию был добавлен класс с именем .navbar-fixed-top , который создает размещение для навигации. Я добавил этот класс в тег nav. Положение установлено как фиксированное, а добавление левого и правого позиционирования гарантирует, что размещение будет правильным и займет всю ширину страницы.

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

Другим важным фактором является z-индекс. Поскольку мы хотим, чтобы навигация всегда была видна, нам нужно убедиться, что она не перекрывается другими элементами. Когда мы ссылаемся на z-index , мы говорим о свойстве CSS, которое устанавливает порядок стека определенных элементов. Элемент с большим порядком стека всегда находится перед другим элементом с меньшим порядком стека. Значение 999 — это большое число, что делает его безопасным для навигации.

Настроить тело страницы

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

 [CSS]

тело {

отступы сверху: 75px;

}

[/css]

Имейте в виду, что ваш отступ может быть больше или меньше в зависимости от толщины фиксированного заголовка.

Делаем липкий заголовок мягким

Обычно заголовок становится тоньше, когда пользователь прокручивает страницу до определенной точки, из-за чего он выглядит мягким. Когда навигация уменьшается в размере, это помогает предоставить пользователю больше места для просмотра основного содержимого веб-сайта. Это особенно полезно на небольших устройствах. Для этого мы будем использовать комбинацию CSS и JavaScript.

Мягкая навигация со скриптом AnimatedHeader

Чтобы добавить анимированный заголовок, который будет менять свой размер при прокрутке, есть отличное легкое решение, позволяющее сделать навигацию мягкой. Он называется AnimatedHeader. Он имеет лицензию MIT, поэтому его можно использовать для личных или коммерческих проектов. Чтобы получить эти файлы, проверьте AnimatedHeader на GitHub.

Базовый CSS для навигации

Давайте рассмотрим два важных стиля CSS. Первый, вероятно, покажется вам знакомым, .navbar-fixed-top , который указывает нашу высоту, ширину и фиксированное положение для закрепленной навигации. Ниже вы можете видеть, что добавлен еще один класс, указывающий высоту 75 пикселей. Это "сплющенный" размер.

 [CSS]

.navbar-фиксированная вершина {
положение: фиксированное;
сверху: 0;
слева: 0;
ширина: 100%;
фон: #f6f6f6;
z-индекс: 999;
высота: 90 пикселей;
переполнение: скрыто;
-webkit-transition: высота 0,3с;
-moz-переход: высота 0.3с;
переход: высота 0,3 с;
}

.navbar-fixed-top.cbp-af-header-shrink {
высота: 75 пикселей;
}

[/css]

Чтобы изменить размер, JavaScript используется для добавления класса .cpb-af-header-shrink . Давайте взглянем на часть скрипта, в которой это происходит:

 [javascript]

функция прокрутки страницы () {
вар си = прокруткаY();
если (sy >= changeHeaderOn) {
classie.add(заголовок, 'cbp-af-header-shrink');
}
еще {
classie.remove (заголовок, 'cbp-af-header-shrink');
}
сделалПрокрутка = Ложь;
}

[/javascript]

Напоминаем, что в скрипте есть еще что-то, поэтому обязательно загрузите исходный код, чтобы у вас были все компоненты. Как видите, после того, как пользователь прокрутил страницу до определенной точки, добавляется класс .cpb-af-header-shrink . Если пользователь прокручивает страницу вверх, этот класс удаляется.

Параметр фиксированного позиционирования CSS

Есть также вариант, который может быть менее хлопотным. В зависимости от поддержки браузера, для которого вы разрабатываете, position: sticky; делает создание липкого заголовка очень простым. Поддержка браузера не ужасна, но и не полностью глобальна. Когда вы объявили sticky, можно использовать префиксы. Проверьте Могу ли я использовать для получения более подробной информации.

Простой способ описать фиксированное позиционирование состоит в том, что это комбинация относительного и фиксированного позиционирования. Я предполагаю, что вы довольно часто сталкиваетесь с липким позиционированием. Мы говорим здесь о заголовках, но это также полезно для любого элемента пользовательского интерфейса, который вы хотите сделать «липким», когда пользователи прокручивают страницу. Они видят, как он «застревает», когда элемент достигает определенного расстояния от края окна просмотра.

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

Использование положения: липкое

Это довольно просто в использовании. Несколько объявлений CSS, и я смог получить липкий заголовок. Вот три простых шага:

1. Найдите правильный стиль, чтобы объявить элемент липким, используя position:sticky; (не забывайте префиксы браузера, такие как position: -webkit-sticky; ).
2. Выберите «липкий край» (верхний, правый, нижний или левый), к которому будет «прилипать» элемент.
3. Объявите расстояние от «липкого края», то есть 10 пикселей для заголовка, который становится липким, когда он находится на расстоянии 10 пикселей от области прокрутки.

 [CSS]

.navbar-фиксированная вершина {
  позиция: -webkit-липкая;
  положение: липкое;
  сверху: 0;
}

[/css] 

Мне не нужно пространство между липким заголовком и окном просмотра, так что это 0 пикселей сверху. Вы можете увидеть этот пример на Codepen.

Помните об этих липких ситуациях переполнения

Совместимость с переполнением

Это здорово, но не идеально. Есть некоторые ограничения. Иногда переполнение может быть немного непредсказуемым. Лучше избегать определенных типов переполнения родительского элемента чем-то, что требует position: sticky . Могут быть проблемы с автоматическим переполнением, прокруткой или скрытием.

Ограниченная поддержка браузера

Поддержка браузерами ограничена, поэтому можно использовать правило supports , чтобы определить, поддерживает ли текущий браузер фиксированное позиционирование. Это выглядит так:

 [CSS]

@supports(позиция: липкая){
  .заголовок{
    позиция: -webkit-липкая;
    положение: липкое;
    сверху: 0;
  }
}

[/css]

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

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

Не пытайтесь повторить это на своем действующем сайте.

Создайте липкий заголовок веб-сайта для своих сайтов, размещенных на WP Engine, на Local! Узнайте больше и скачайте бесплатно здесь!