Tämä tehokas ja tehokas tekniikka on paljon helpompi saavuttaa kuin saatat odottaa.

Verkkosuunnittelussa tahmea otsikko on tehokas työkalu, joka parantaa käyttökokemusta ja navigointia. Kun käyttäjät vierittävät verkkosivua alaspäin, tahmea otsikko jää näkyviin, mikä varmistaa, että keskeiset navigointilinkit ovat aina käytettävissä. Perehdytään CSS: n avulla pysyvän otsikon rakentamiseen.

Mihin tarttuvaa otsikkoa käytetään?

Tahmea otsikko pysyy yhdessä paikassa verkkosivulla, vaikka käyttäjä vieritisi. Ensisijaisesti tietyt CSS-ominaisuudet asento: tahmea, auttaa sinua saavuttamaan tämän käyttäytymisen. Joitakin tarttuvan otsikon etuja ovat parempi käyttökokemus ja helppo navigointi verkkosivustolla.

  • Käyttäjät pääsevät helposti tärkeimpiin navigointilinkkeihin rullaamatta ylös.
  • Logo tai tuotenimi pysyy näkyvissä, mikä vahvistaa brändi-identiteettiä.
  • Tahmea otsikko voi säästää tilaa poistamalla sivupalkin navigoinnin ja jättämällä enemmän tilaa sisällölle.

Otsikon suunnittelu: HTML-rakenne

instagram viewer

Jokaisen tarttuvan otsikon perusta on sen HTML-rakenne. Näin voit luoda tarvittavat HTML-elementit tarttuvaa otsikkoa varten.

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

Tämä rakenne käyttää otsikkoa, joka sisältää logon ja navigointielementin sekä navigointilinkkien järjestämättömän luettelon. Sitten se käyttää päätunnistetta ja useita osiotunnisteita edustamaan jokaista sivun osaa. Tällä hetkellä sivu näyttää tältä:

Perusteiden luominen CSS: n avulla

Alla olevaa CSS-koodia käytetään laatikkomallin ominaisuudet kuten pehmuste, marginaali ja flexbox luodaksesi houkuttelevan ulkoasun, jossa on korkeus jokaiselle paikkamerkkiosalle.

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

Sivun pitäisi nyt näyttää tältä:

Sticky Effectin toteuttaminen: CSS

Tällä hetkellä, kun vierität sivua alaspäin, huomaat, että otsikko siirtyy pois näytöltä. Voit korjata tämän käyttämällä CSS-sijaintiominaisuus ja aseta otsikko tahmeaksi.

Tämä ominaisuus käyttäytyy kuin yhdistelmä suhteellista ja kiinteää sijaintia käyttäjän vieritysasennosta riippuen.

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

Otsikon asettaminen tahmeaksi varmistaa, että se pysyy paikallaan sivulla rullauksesta riippumatta. Top-ominaisuus määrittää, mihin kohtaan sivua otsikko tulee sijoittaa. Nyt sivua vierittämällä alaspäin saadaan:

Mahdollisten pinoamisongelmien ratkaiseminen

Joskus sivun muut elementit voivat olla päällekkäisiä tarttuvan otsikon kanssa. Varmistaaksesi, että otsikko pysyy ylhäällä, voit lisätä z-indeksiominaisuuden:

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

Lisää lopuksi sujuva vieritysominaisuus HTML-elementtiin mukavamman käyttökokemuksen saamiseksi:

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

Sivun pitäisi nyt rullata sujuvasti osioiden välillä:

Web-navigoinnin tehostaminen CSS-kiinnittävillä otsikoilla

Kiinteän otsikon lisääminen verkkosivustosi suunnitteluun voi parantaa käyttökokemusta huomattavasti. Tämä ominaisuus pitää käyttäjät yhteydessä päävalikkoon, ylläpitää johdonmukaista brändiä ja antaa verkkosivustollesi modernin ilmeen.

CSS: n avulla tämän tehosteen luominen on yksinkertaista ja tehokasta. Verkkosuunnittelutrendit muuttuvat ajan myötä, mutta tarttuva otsikko on aina hyödyllinen eri toimialoilla.