Тази ефективна и мощна техника е много по-лесна за постигане, отколкото бихте очаквали.

В уеб дизайна залепващата заглавка е мощен инструмент, който подобрява потребителското изживяване и навигацията. Докато потребителите превъртат надолу по уеб страница, лепкава заглавка остава видима, което гарантира, че основните връзки за навигация са винаги достъпни. Нека се задълбочим в тънкостите на изграждането на лепкава заглавка с помощта на 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 кодът по-долу използва свойства на модела на кутията като padding, margin и 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;
}

Сега страницата трябва да изглежда така:

Внедряване на Sticky Effect: 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 Sticky Headers

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

Със силата на CSS създаването на този ефект е лесно и ефективно. Тенденциите в уеб дизайна се променят с времето, но залепващата заглавка винаги е полезна за различни индустрии.