Освоить эту эффективную и мощную технику гораздо проще, чем вы ожидаете.

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

Для чего нужен липкий заголовок?

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

  • Пользователи могут легко получить доступ к основным навигационным ссылкам без прокрутки вверх.
  • Логотип или название бренда остается видимым, усиливая индивидуальность бренда.
  • Прикрепленный заголовок может сэкономить место за счет удаления навигации на боковой панели, оставляя больше места для контента.
instagram viewer

Проектирование заголовка: структура HTML

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

<body>
<header>
<spanclass="logo">Company Logo 🏠span>
<nav>
<ul>
<li><ahref="#home">Homea>li>
<li><ahref="#about">Abouta>li>
<li><ahref="#services">Servicesa>li>
<li><ahref="#contact">Contacta>li>
ul>
nav>
header>
<mainid="home"><h1>Home pageh1>main>
<sectionid="about"><h1>Abouth1>section>
<sectionid="services"><h1>Servicesh1>section>
<sectionid="contact"><h1>Contacth1>section>
body>

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

Закладываем основу с помощью CSS

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

@import url("https://fonts.googleapis.com/css2?family=Quicksand: wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


html { font-size: 62.5%; }


body { font-family: "Quicksand", sans-serif; }


main,
section { height: 100vh; }


.logo { font-size: 3rem; }


main,
header,
section {
display: flex;
align-items: center;
}


main { justify-content: center; }


header {
justify-content: space-between;
padding: 1rem 2rem;
background: #b2babb; 
}


navul {
display: flex;
column-gap: 2rem;
list-style: none;
}


a {
text-decoration: none;
font-size: 2rem;
color: #333;
}


section { justify-content: center; }


#home { background: #2c3e50; }


#about { background: #ccccff; }


#services { background: #f5b7b1; }


#contact { background: #40e0d0; }


h1 {
 font-size: 4rem;
 color: #fff;
}

Теперь страница должна выглядеть так:

Реализация эффекта липкости: CSS

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

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

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}

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

Решение потенциальных проблем со штабелированием

Иногда другие элементы на странице могут перекрываться с прикрепленным заголовком. Чтобы заголовок оставался сверху, вы можете добавить свойство z-index:

header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}

Наконец, добавьте свойство плавной прокрутки к элементу HTML для более удобного взаимодействия с пользователем:

html {
font-size: 62.5%;
scroll-behavior: smooth;
}

Страница теперь должна плавно прокручиваться между разделами:

Улучшение веб-навигации с помощью липких заголовков CSS

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

Благодаря возможностям CSS создание этого эффекта становится простым и эффективным. Тенденции веб-дизайна со временем меняются, но липкий заголовок всегда полезен для разных отраслей.