Home-theater-designers
Em web design, um cabeçalho fixo é uma ferramenta poderosa que aprimora a experiência e a navegação do usuário. À medida que os usuários rolam para baixo em uma página da Web, um cabeçalho fixo permanece visível, garantindo que os links essenciais de navegação estejam sempre acessíveis. Vamos nos aprofundar nos meandros da construção de um cabeçalho fixo usando CSS.
MUO Vídeo do dia ROLE PARA CONTINUAR COM O CONTEÚDO
O que é um cabeçalho fixo?
Um cabeçalho fixo permanece no mesmo lugar da página da web, mesmo quando o usuário rola a página. Propriedades CSS específicas, principalmente posição: pegajosa , irá ajudá-lo a alcançar esse comportamento. Consequentemente:
- Os usuários podem acessar facilmente os principais links de navegação sem rolar até o topo.
- O logotipo ou nome da marca permanece visível, reforçando a identidade da marca.
- Um cabeçalho fixo pode economizar espaço ao remover a navegação da barra lateral, deixando mais espaço para conteúdo.
Alguns benefícios de ter um cabeçalho fixo incluem uma experiência de usuário aprimorada e navegação fácil no site.
Projetando o cabeçalho: estrutura HTML
A base de qualquer cabeçalho fixo é sua estrutura HTML. Veja como criar os elementos HTML necessários para seu cabeçalho fixo.
<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>
Esta estrutura utiliza um cabeçalho que contém o logotipo e um elemento nav com uma lista não ordenada de links de navegação. Em seguida, ele usa uma tag principal e várias tags de seção para representar cada seção da página. No momento, a página está assim:
modo escuro do explorador de arquivos do Windows 10
Estabelecendo as bases com CSS
O código CSS abaixo usa propriedades do modelo de caixa como preenchimento, margem e flexbox para criar um design atraente, com altura para cada seção de espaço reservado.
@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 agora deve ficar assim:
Implementando o efeito pegajoso: CSS
Atualmente, ao rolar a página para baixo, você notará que o cabeçalho sai da tela. Para corrigir isso, use a propriedade de posição CSS e defina o cabeçalho como fixo.
como voltar para o antigo layout do Facebook 2020
Esta propriedade se comporta como uma combinação de posicionamento relativo e fixo, dependendo da posição de rolagem do usuário.
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
}
Definir o cabeçalho como fixo garante que ele permaneça em uma posição na página, independentemente da rolagem. A propriedade top especifica onde o cabeçalho deve ser colocado na página. Agora, rolar a página para baixo produz:
Resolvendo possíveis problemas de empilhamento
Às vezes, outros elementos da página podem se sobrepor ao cabeçalho fixo. Para garantir que o cabeçalho permaneça no topo, você pode adicionar a propriedade z-index:
header {
justify-content: space-between;
padding: 1rem 2rem;
position: sticky;
top: 0;
z-index: 9999;
}
Por fim, adicione a propriedade de rolagem suave ao elemento HTML para uma experiência de usuário melhor:
html {
font-size: 62.5%;
scroll-behavior: smooth;
}
A página agora deve rolar suavemente entre as seções:
Elevando a navegação na Web com cabeçalhos fixos CSS
Adicionar um cabeçalho fixo ao design do seu site pode melhorar muito a experiência do usuário. Esse recurso mantém os usuários conectados ao menu principal, mantém uma marca consistente e dá ao seu site uma aparência moderna.
como desmontar um disco rígido
Com o poder do CSS, criar esse efeito é simples e eficaz. As tendências de design da Web mudam com o tempo, mas o cabeçalho fixo é sempre útil para diferentes setores.