Šo efektīvo un jaudīgo paņēmienu ir daudz vieglāk sasniegt, nekā jūs varētu gaidīt.

Tīmekļa dizainā lipīga galvene ir spēcīgs rīks, kas uzlabo lietotāja pieredzi un navigāciju. Lietotājiem ritinot tīmekļa lapu uz leju, joprojām ir redzama lipīga galvene, kas nodrošina, ka vienmēr ir pieejamas svarīgas navigācijas saites. Iedziļināsimies līmējošās galvenes izveides sarežģītībā, izmantojot CSS.

Kā izmantot lipīgo galveni?

Lipīga galvene paliek vienuviet tīmekļa lapā pat tad, kad lietotājs ritina. Īpaši CSS rekvizīti, galvenokārt pozīcija: lipīga, palīdzēs jums sasniegt šo uzvedību. Dažas lipīgās galvenes priekšrocības ir uzlabota lietotāja pieredze un vienkārša navigācija vietnē.

  • Lietotāji var viegli piekļūt galvenajām navigācijas saitēm, neritinot uz augšu.
  • Logotips vai zīmola nosaukums paliek redzams, nostiprinot zīmola identitāti.
  • Lipīga galvene var ietaupīt vietu, noņemot sānjoslas navigāciju, atstājot vairāk vietas saturam.

Galvenes projektēšana: HTML struktūra

Jebkuras lipīgās galvenes pamats ir tās HTML struktūra. Lūk, kā izveidot nepieciešamos HTML elementus jūsu lipīgajai galvenei.

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>

Šajā struktūrā tiek izmantota galvene, kurā ir logotips un navigācijas elements ar nesakārtotu navigācijas saišu sarakstu. Pēc tam tas izmanto galveno tagu un vairākus sadaļu tagus, lai attēlotu katru lapas sadaļu. Šobrīd lapa izskatās šādi:

Pamatu likšana ar CSS

Tiek izmantots tālāk norādītais CSS kods kastes modeļa īpašības piemēram, polsterējums, piemale un flexbox, lai izveidotu pievilcīgu dizainu ar augstumu katrai viettura sadaļai.

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

Lapai tagad vajadzētu izskatīties šādi:

Sticky Effect ieviešana: CSS

Pašlaik, ritinot lapu uz leju, pamanīsit, ka galvene no ekrāna tiek pārvietota. Lai to labotu, izmantojiet CSS pozīcijas rekvizīts un iestatiet galveni uz lipīgu.

Šis rekvizīts darbojas kā relatīvas un fiksētas pozicionēšanas kombinācija atkarībā no lietotāja ritināšanas pozīcijas.

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

Iestatot galvenes kā lipīgu, tiek nodrošināta, ka tā pieturas pie lapas vietas neatkarīgi no ritināšanas. Augšējais rekvizīts norāda, kur lapas vietā ir jānovieto galvene. Tagad, ritinot lapu uz leju, tiek iegūts:

Iespējamo sakraušanas problēmu risināšana

Dažreiz citi lapas elementi var pārklāties ar lipīgo galveni. Lai nodrošinātu, ka galvene paliek augšpusē, varat pievienot z-index rekvizītu:

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

Visbeidzot, HTML elementam pievienojiet vienmērīgas ritināšanas rekvizītu, lai uzlabotu lietotāja pieredzi:

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

Tagad lapai vajadzētu vienmērīgi ritināt starp sadaļām:

Tīmekļa navigācijas uzlabošana, izmantojot CSS lipīgās galvenes

Līmējošas galvenes pievienošana vietnes dizainam var ievērojami uzlabot lietotāja pieredzi. Šī funkcija nodrošina lietotāju savienojumu ar galveno izvēlni, saglabā konsekventu zīmolu un piešķir jūsu vietnei modernu izskatu.

Izmantojot CSS jaudu, šī efekta radīšana ir vienkārša un efektīva. Tīmekļa dizaina tendences laika gaitā mainās, taču lipīgā galvene vienmēr ir noderīga dažādām nozarēm.