Šią veiksmingą ir galingą techniką pasiekti daug lengviau, nei tikitės.

Žiniatinklio dizaino srityje lipni antraštė yra galingas įrankis, pagerinantis vartotojo patirtį ir naršymą. Naudotojams slenkant tinklalapiu žemyn, lieka matoma lipni antraštė, užtikrinanti, kad pagrindinės naršymo nuorodos visada būtų pasiekiamos. Pasigilinkime į lipnios antraštės kūrimo naudojant CSS sudėtingumą.

Kam naudojama lipni antraštė?

Lipni antraštė išlieka vienoje tinklalapio vietoje, net kai vartotojas slenka. Visų pirma, konkrečios CSS savybės padėtis: lipni, padės jums pasiekti tokį elgesį. Kai kurie lipnios antraštės pranašumai yra geresnė naudotojo patirtis ir paprasta naršyti svetainėje.

  • Vartotojai gali lengvai pasiekti pagrindines naršymo nuorodas neslinkdami į viršų.
  • Logotipas arba prekės pavadinimas išlieka matomas, sustiprinant prekės ženklo tapatybę.
  • Lipni antraštė gali sutaupyti vietos pašalinus šoninės juostos naršymą ir palikti daugiau vietos turiniui.

Antraštės kūrimas: HTML struktūra

Bet kokios lipnios antraštės pagrindas yra jos HTML struktūra. Štai kaip sukurti reikalingus HTML elementus lipniajai antraštei.

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>

Šioje struktūroje naudojama antraštė, kurioje yra logotipas ir navigacijos elementas su nesutvarkytu naršymo nuorodų sąrašu. Tada ji naudoja pagrindinę žymą ir keletą skilčių žymų, kad atspindėtų kiekvieną puslapio skyrių. Šiuo metu puslapis atrodo taip:

Pagrindų klojimas naudojant CSS

Naudojamas toliau pateiktas CSS kodas dėžutės modelio savybės pvz., pamušalas, paraštė ir lankstus langelis, kad sukurtumėte patrauklų dizainą su kiekvienos rezervuotos vietos skilties aukščiu.

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

Dabar puslapis turėtų atrodyti taip:

Lipniojo efekto įgyvendinimas: CSS

Šiuo metu, kai slinksite puslapiu žemyn, pastebėsite, kad antraštė pasislenka iš ekrano. Norėdami tai išspręsti, naudokite CSS pozicijos nuosavybė ir nustatykite antraštę į lipnią.

Ši savybė veikia kaip santykinio ir fiksuoto padėties nustatymo derinys, priklausomai nuo vartotojo slinkties padėties.

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

Nustačius lipnią antraštę užtikrinama, kad ji laikysis tam tikroje puslapio vietoje, nepaisant slinkimo. Viršutinė ypatybė nurodo, kurioje puslapio vietoje turėtų būti antraštė. Dabar, slinkus žemyn puslapiu, gaunama:

Galimų sudėjimo problemų sprendimas

Kartais kiti puslapio elementai gali sutapti su lipnia antrašte. Norėdami užtikrinti, kad antraštė liktų viršuje, galite pridėti z-index nuosavybę:

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

Galiausiai, pridėkite sklandaus slinkimo ypatybę prie HTML elemento, kad pagerintumėte naudotojo patirtį:

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

Dabar puslapis turėtų sklandžiai slinkti tarp skyrių:

Padidinkite žiniatinklio naršymą naudojant CSS lipnias antraštes

Pridėjus lipnią antraštę prie savo svetainės dizaino, galima labai pagerinti vartotojo patirtį. Ši funkcija leidžia vartotojams prisijungti prie pagrindinio meniu, palaiko nuoseklų prekės ženklą ir suteikia svetainei šiuolaikišką išvaizdą.

CSS galia sukurti šį efektą yra nesudėtinga ir efektyvu. Interneto dizaino tendencijos laikui bėgant keičiasi, tačiau lipni antraštė visada naudinga skirtingoms pramonės šakoms.