Dosažení této účinné a výkonné techniky je mnohem snazší, než byste čekali.

Ve webovém designu je lepicí záhlaví mocným nástrojem, který zlepšuje uživatelský dojem a navigaci. Když uživatelé posouvají webovou stránku dolů, zůstává viditelné záhlaví, které zajišťuje, že základní navigační odkazy jsou vždy dostupné. Pojďme se ponořit do složitosti vytváření lepivé hlavičky pomocí CSS.

K čemu se používá lepicí hlavička?

Nalepovací záhlaví zůstává na jednom místě na webové stránce, i když uživatel roluje. Především specifické vlastnosti CSS pozice: lepkavý, vám pomůže tohoto chování dosáhnout. Mezi výhody lepivého záhlaví patří lepší uživatelský dojem a snadná navigace na webu.

  • Uživatelé mohou snadno přistupovat k hlavním navigačním odkazům, aniž by museli posouvat nahoru.
  • Logo nebo název značky zůstávají viditelné a posilují identitu značky.
  • Lepící záhlaví může ušetřit místo odstraněním navigace na bočním panelu a ponecháním více prostoru pro obsah.

Návrh záhlaví: Struktura HTML

Základem každé lepivé hlavičky je její HTML struktura. Zde je návod, jak vytvořit potřebné prvky HTML pro vaši lepkavou hlavičku.

instagram viewer 

<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>

Tato struktura používá záhlaví, které obsahuje logo a navigační prvek s neuspořádaným seznamem navigačních odkazů. Poté používá hlavní značku a několik značek sekcí k reprezentaci každé sekce na stránce. V tuto chvíli stránka vypadá takto:

Pokládání základů pomocí CSS

Používá níže uvedený kód CSS vlastnosti krabicového modelu jako vycpávka, okraj a flexbox k vytvoření atraktivního designu s výškou každé zástupné části.

@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;
}

Stránka by nyní měla vypadat takto:

Implementace efektu Sticky: CSS

V současné době, když posouváte stránku dolů, všimnete si, že se záhlaví přesune mimo obrazovku. Chcete-li to opravit, použijte vlastnost CSS position a nastavte hlavičku na lepkavou.

Tato vlastnost se chová jako kombinace relativního a pevného umístění v závislosti na pozici posouvání uživatele.

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

Nastavením záhlaví na lepivé zajistíte, že zůstane na stránce bez ohledu na posunutí. Vlastnost top určuje, kam na stránce má být umístěno záhlaví. Nyní posouváním dolů získáte:

Řešení potenciálních problémů se stohováním

Někdy se mohou s lepivým záhlavím překrývat jiné prvky na stránce. Chcete-li zajistit, aby záhlaví zůstalo nahoře, můžete přidat vlastnost z-index:

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

Nakonec přidejte do prvku HTML vlastnost hladkého posouvání, abyste získali lepší uživatelský dojem:

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

Stránka by se nyní měla hladce posouvat mezi sekcemi:

Povýšení webové navigace s CSS Sticky Headers

Přidání lepivého záhlaví do designu vašeho webu může výrazně zlepšit uživatelský dojem. Tato funkce udržuje uživatele připojené k hlavní nabídce, udržuje konzistentní značku a dává vašemu webu moderní vzhled.

Se silou CSS je vytvoření tohoto efektu přímočaré a efektivní. Trendy webdesignu se v průběhu času mění, ale lepící záhlaví je vždy užitečné pro různá odvětví.