Como criar um cabeçalho fixo com CSS
Em web design, um cabeçalho autocolante é uma ferramenta poderosa que melhora a experiência do utilizador e a navegação. À medida que os utilizadores percorrem uma página Web, um sticky header permanece visível, garantindo que as ligações de navegação essenciais estão sempre acessíveis. Vamos aprofundar os meandros da criação de um cabeçalho fixo utilizando CSS.
Para que serve um sticky header?
Um cabeçalho persistente que permanece fixo num local específico de uma página Web é conhecido como “cabeçalho fixo”. Para criar esta funcionalidade, são utilizadas propriedades CSS específicas, tais como a propriedade “position” com o valor “stick
Os utilizadores podem consultar facilmente as principais hiperligações de navegação sem serem obrigados a voltar ao topo da página, o que lhes permite uma navegação simples e conveniente ao longo da sua experiência no nosso Web site.
O logótipo e o nome da marca são apresentados de forma proeminente, preservando assim o carácter distintivo da marca.
Uma opção de design visualmente apelativa e funcional é a incorporação de um cabeçalho autocolante que elimina a necessidade de uma quantidade excessiva de navegação na barra lateral, criando assim uma área adicional para a apresentação de conteúdos relevantes numa página Web.
Conceber o cabeçalho: Estrutura HTML
A pedra angular de um sticky header eficaz reside na sua arquitetura HTML. Para construir os componentes essenciais de um sticky header, siga estes passos para criar os elementos HTML necessários.
<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>
O presente desenho utiliza um componente de cabeçalho que incorpora o emblema da empresa juntamente com um elemento de navegação que apresenta uma lista ordenada de hiperligações. Posteriormente, utiliza um invólucro principal e vários invólucros de segmentação para ilustrar cada divisão dentro da área de conteúdo. Atualmente, a página Web é apresentada da seguinte forma:
Estabelecer as bases com CSS
O CSS utiliza vários atributos de modelo de caixa, como padding, margin e flexbox, para criar uma disposição visualmente apelativa, em que as secções individuais têm uma altura uniforme.
@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;
}
A página deve agora ter o seguinte aspeto:
Implementando o efeito Sticky: CSS
Para retificar o problema de o cabeçalho se mover para fora do ecrã ao percorrer a página, utilize a propriedade CSS position e configure o cabeçalho como um elemento “pegajoso”.
Esta propriedade específica apresenta características que lembram tanto o posicionamento relativo como o fixo, no que diz respeito à posição de deslocação do utilizador.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Definir o cabeçalho para ter uma posição fixa em relação à janela de visualização é uma forma de garantir a sua visibilidade e acessibilidade à medida que o utilizador navega pelo conteúdo da página Web. Ao especificar o valor da propriedade top em pixels ou unidades percentuais, o programador pode controlar com precisão onde o cabeçalho aparecerá na parte visível do ecrã. À medida que o utilizador percorre a página, o cabeçalho permanece estacionário, fornecendo pistas visuais consistentes para navegação e interação com outros elementos do site.
O seu browser não suporta a etiqueta de vídeo.
Resolvendo possíveis problemas de empilhamento
Para evitar que o cabeçalho fixo seja obscurecido por outros elementos na página, recomenda-se a utilização da propriedade CSS z-index . Isto garantirá que o cabeçalho permanece visível e permanece na sua posição designada em todos os momentos.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
Incorporar o atributo de deslocamento elegante na etiqueta HTML para melhorar a experiência geral do utilizador de uma forma elegante:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
O scrolling desta página foi optimizado para ser contínuo e fluido à medida que transita entre diferentes secções, proporcionando uma experiência de utilizador mais agradável.
O seu browser não suporta a etiqueta de vídeo.
Melhorar a navegação na Web com cabeçalhos fixos CSS
A incorporação de um cabeçalho persistente no seu Web design pode melhorar significativamente a experiência geral do utilizador. Ao fazê-lo, permite que os visitantes se mantenham atentos ao menu de navegação principal, mantém uma identidade de marca uniforme e confere um aspeto atualizado ao seu site.
Utilizando as capacidades das CSS, é possível obter este resultado sem esforço e com impacto. A presença perpétua de um cabeçalho fixo pode ser altamente benéfica em vários sectores devido à sua relevância duradoura nas tendências de web design, apesar das flutuações ao longo do tempo.