Home-theater-designers
En el disseny web, una capçalera enganxosa és una eina potent que millora l'experiència de l'usuari i la navegació. A mesura que els usuaris es desplacen cap avall per una pàgina web, una capçalera enganxosa es manté visible, assegurant que els enllaços de navegació essencials siguin sempre accessibles. Aprofundim en les complexitats de crear una capçalera enganxosa amb CSS.
MUO Vídeo del dia DESPLACEU PER CONTINUAR AMB EL CONTINGUT
Què és una capçalera enganxosa?
Una capçalera enganxosa es manté en un sol lloc d'una pàgina web, fins i tot quan l'usuari es desplaça. Propietats CSS específiques, principalment posició: enganxosa , l'ajudarà a aconseguir aquest comportament. Conseqüentment:
- Els usuaris poden accedir fàcilment als enllaços de navegació principals sense desplaçar-se cap a la part superior.
- El logotip o el nom de la marca continua sent visible, reforçant la identitat de la marca.
- Una capçalera enganxosa pot estalviar espai eliminant la navegació de la barra lateral i deixant més espai per al contingut.
Alguns dels avantatges de tenir una capçalera enganxosa inclouen una experiència d'usuari millorada i una navegació fàcil del lloc web.
Disseny de la capçalera: estructura HTML
La base de qualsevol capçalera enganxosa és la seva estructura HTML. A continuació s'explica com crear els elements HTML necessaris per a la vostra capçalera enganxosa.
<body>
<header>
<span class="logo">Company Logo 🏠</span>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main id="home"><h1>Home page</h1></main>
<section id="about"><h1>About</h1></section>
<section id="services"><h1>Services</h1></section>
<section id="contact"><h1>Contact</h1></section>
</body>
Aquesta estructura utilitza una capçalera que conté el logotip i un element de navegació amb una llista no ordenada d'enllaços de navegació. A continuació, utilitza una etiqueta principal i diverses etiquetes de secció per representar cada secció de la pàgina. De moment, la pàgina té aquest aspecte:
Posar les bases amb CSS
El codi CSS següent utilitza propietats del model de caixa com el farciment, el marge i la caixa flexible per crear un disseny atractiu, amb una alçada per a cada secció de marcador de posició.
@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;
}
nav ul {
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;
}
Ara la pàgina hauria de ser així:
bsod procés crític va morir Windows 10
Implementació de l'efecte Sticky: CSS
Actualment, quan us desplaceu per la pàgina, notareu que la capçalera es desplaça fora de la pantalla. Per solucionar-ho, utilitzeu la propietat de posició CSS i configureu la capçalera com a enganxós.
Aquesta propietat es comporta com una combinació de posicionament relatiu i fix, depenent de la posició de desplaçament de l'usuari.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Si configureu la capçalera com a enganxosa, s'assegura que s'enganxi a una posició de la pàgina independentment del desplaçament. La propietat superior especifica on s'ha de col·locar la capçalera de la pàgina. Ara, desplaçant-se cap avall per la pàgina obtindrà:
Abordar possibles problemes d'apilament
De vegades, altres elements de la pàgina es poden solapar amb la capçalera enganxosa. Per assegurar-vos que la capçalera es mantingui a la part superior, podeu afegir la propietat z-index:
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
Finalment, afegiu la propietat de desplaçament suau a l'element HTML per obtenir una experiència d'usuari més agradable:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
Ara la pàgina hauria de desplaçar-se sense problemes entre les seccions:
Augment de la navegació web amb capçaleres adhesives CSS
Afegir una capçalera enganxosa al disseny del vostre lloc web pot millorar molt l'experiència de l'usuari. Aquesta funció manté els usuaris connectats al menú principal, manté una marca coherent i dóna al vostre lloc web un aspecte modern.
Amb el poder de CSS, crear aquest efecte és senzill i eficaç. Les tendències de disseny web canvien amb el temps, però la capçalera enganxosa sempre és útil per a diferents indústries.