Ezt a hatékony és erőteljes technikát sokkal könnyebb elérni, mint gondolnád.

A webdesignban a ragadós fejléc hatékony eszköz, amely javítja a felhasználói élményt és a navigációt. Amikor a felhasználók lefelé görgetnek egy weboldalt, egy ragadós fejléc látható marad, amely biztosítja, hogy a lényeges navigációs hivatkozások mindig elérhetőek legyenek. Nézzük meg a ragadós fejléc CSS használatával történő felépítésének bonyolultságát.

Mire használható a ragadós fejléc?

A ragadós fejléc egy helyen marad a weboldalon, még akkor is, ha a felhasználó görget. Elsősorban konkrét CSS-tulajdonságok pozíció: ragadós, segít elérni ezt a viselkedést. A ragadós fejléc előnyei közé tartozik a jobb felhasználói élmény és az egyszerű webhely-navigáció.

  • A felhasználók könnyedén elérhetik a fő navigációs hivatkozásokat anélkül, hogy a tetejére görgetnének.
  • A logó vagy márkanév látható marad, erősítve a márkaidentitást.
  • A ragadós fejléc helyet takaríthat meg az oldalsáv navigációjának eltávolításával, így több hely marad a tartalom számára.
instagram viewer

Fejléc tervezése: HTML-struktúra

Minden ragadós fejléc alapja a HTML-struktúra. Így hozhatja létre a ragadós fejléchez szükséges HTML-elemeket.

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

Ez a struktúra egy fejlécet használ, amely tartalmazza a logót és egy navigációs elemet a navigációs hivatkozások rendezetlen listájával. Ezután egy fő címkét és több szakaszcímkét használ az oldal egyes szakaszainak ábrázolására. Jelenleg így néz ki az oldal:

Az alapok lerakása CSS-sel

Az alábbi CSS kódot használja dobozmodell tulajdonságai mint a párnázás, a margó és a flexbox, hogy vonzó dizájnt hozzon létre, mindegyik helyőrző szakasz magasságával.

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

Az oldalnak most így kell kinéznie:

A Sticky Effect megvalósítása: CSS

Jelenleg, amikor lefelé görget az oldalon, észre fogja venni, hogy a fejléc elmozdul a képernyőről. Ennek javításához használja a CSS pozíció tulajdonság és állítsa be a fejlécet ragadósra.

Ez a tulajdonság a relatív és rögzített pozicionálás kombinációjaként viselkedik, a felhasználó görgetési pozíciójától függően.

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

A fejléc ragadósra állítása biztosítja, hogy a görgetéstől függetlenül az oldalon egy pozícióban maradjon. A felső tulajdonság megadja, hogy az oldalon hova kell elhelyezni a fejlécet. Most az oldalt lefelé görgetve a következő eredményeket kapjuk:

A lehetséges halmozási problémák megoldása

Időnként az oldal más elemei átfedhetik a ragadós fejlécet. Annak érdekében, hogy a fejléc felül maradjon, hozzáadhatja a z-index tulajdonságot:

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

Végül adja hozzá a sima görgetés tulajdonságot a HTML elemhez a szebb felhasználói élmény érdekében:

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

Az oldalnak most simán kell görgetnie a szakaszok között:

Webes navigáció emelése CSS ragadós fejlécekkel

Ha ragadós fejlécet ad hozzá a webhely kialakításához, jelentősen javíthatja a felhasználói élményt. Ez a funkció folyamatosan csatlakozik a felhasználókhoz a főmenühöz, konzisztens márkát tart fenn, és modern megjelenést kölcsönöz webhelyének.

A CSS erejével ennek a hatásnak a létrehozása egyszerű és hatékony. A webtervezési trendek idővel változnak, de a ragadós fejléc mindig hasznos a különböző iparágakban.