Seda tõhusat ja võimsat tehnikat on palju lihtsam saavutada, kui võite oodata.

Veebikujunduses on kleepuv päis võimas tööriist, mis täiustab kasutajakogemust ja navigeerimist. Kui kasutajad veebilehte alla kerivad, jääb nähtavaks kleepuv päis, mis tagab, et olulised navigeerimislingid on alati juurdepääsetavad. Uurime CSS-i abil kleepuva päise loomise keerukust.

Milleks kasutada kleepuvat päist?

Kleeppäis jääb veebilehel ühte kohta isegi siis, kui kasutaja kerib. Eelkõige konkreetsed CSS-i omadused asend: kleepuv, aitab teil seda käitumist saavutada. Kleepuva päise mõned eelised hõlmavad paremat kasutuskogemust ja hõlpsat veebisaidil navigeerimist.

  • Kasutajad pääsevad hõlpsalt juurde peamistele navigeerimislinkidele ilma üles kerimata.
  • Logo või kaubamärgi nimi jääb nähtavaks, tugevdades kaubamärgi identiteeti.
  • Kleepuv päis võib ruumi säästa, eemaldades külgriba navigeerimise, jättes rohkem ruumi sisule.

Päise kujundamine: HTML-i struktuur

Iga kleepuva päise alus on selle HTML-struktuur. Siit saate teada, kuidas luua kleepuva päise jaoks vajalikke HTML-i elemente.

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

See struktuur kasutab päist, mis sisaldab logo ja navigeerimiselementi koos järjestamata navigeerimislinkide loendiga. Seejärel kasutab see põhimärgendit ja mitut jaotise silti, mis tähistavad lehe iga jaotist. Hetkel näeb leht välja selline:

Vundamendi loomine CSS-iga

Kasutatakse allolevat CSS-koodi kasti mudeli omadused nagu polster, veeris ja painduv kast, et luua atraktiivne kujundus ja iga kohahoidja jaotise kõrgus.

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

Leht peaks nüüd välja nägema selline:

Kleepuva efekti rakendamine: CSS

Praegu, kui kerite lehte allapoole, märkate, et päis liigub ekraanilt välja. Selle parandamiseks kasutage CSS-i positsiooni atribuut ja määrake päis kleepuvaks.

See omadus käitub sõltuvalt kasutaja kerimisasendist suhtelise ja fikseeritud positsioneerimise kombinatsioonina.

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

Päise kleepuvaks seadmine tagab selle kleepumise lehel kindlale kohale olenemata kerimisest. Ülemine atribuut määrab, kuhu lehele päis paigutada. Leheküljel allapoole kerides on tulemus:

Võimalike virnastamisprobleemide lahendamine

Mõnikord võivad lehe muud elemendid kleepuva päisega kattuda. Päise ülaosas püsimise tagamiseks saate lisada z-indeksi atribuudi:

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

Lõpuks lisage HTML-elemendile sujuva kerimise atribuut, et kasutajakogemus oleks parem:

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

Leht peaks nüüd sujuvalt jaotiste vahel kerima:

Veebis navigeerimise tõstmine CSS-i kleepuvate päistega

Kleepuva päise lisamine veebisaidi kujundusele võib kasutajakogemust oluliselt parandada. See funktsioon hoiab kasutajad peamenüüga ühenduses, säilitab ühtse kaubamärgi ja annab teie veebisaidile kaasaegse välimuse.

CSS-i võimsuse abil on selle efekti loomine lihtne ja tõhus. Veebidisaini trendid muutuvad ajas, kuid kleepuvast päisest on alati kasu erinevatele tööstusharudele.