Esta técnica eficaz e poderosa é muito mais fácil de alcançar do que você imagina.

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.

O que usar 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. Alguns benefícios de ter um cabeçalho fixo incluem uma experiência de usuário aprimorada e navegação fácil no site.

  • 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.
instagram viewer

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

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:

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


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

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.

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.

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.