Como criar uma sticky navigation apenas com CSS
Tags: css, webdev, portugues
Published: 2023-12-12 13:12:15

_**Nota:** apenas traduzi o texto abaixo e postei aqui._

_**Sticky navs**_ são componentes de navegação que ficam no topo da página conforme você "scrolla" ela para baixo.

Por muito tempo, fazer com que a navegação "fixasse" exigia o uso de JavaScript para detectar quando a navegação iria passar do topo da página e, em seguida, adicionar uma "css class" para mudar para `position: absolute`.

Mas hoje você pode usar uma propriedade CSS simples para obter o mesmo efeito. Vejamos como isso funciona.

## position: sticky

A propriedade CSS `position: sticky` diz ao navegador para deixar um elemento "scrolar" com o resto do document até chegar ao topo da página.

Depois disso, ele deve ficar lá e deixar o restante dos elementos da página "scrollar" atrás dele. 

```javascript
.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
```

```html
<nav class="sticky">
    <ul>
        <li><a href="#a">Seção A</a></li>
        <li><a href="#b">Seção B</a></li>
        <li><a href="#c">Seção C</a></li>
        <li><a href="#d">Seção D</a></li>
    </ul>
</nav>
```

Aqui está uma <a target='_blank' href='https://codepen.io/simevidas/pen/JbdJRZ'>demonstração</a> para você brincar.

Fico continuamente impressionado com a capacidade do CSS de substituir JavaScript complexo por propriedades "de uma linha". Mais disso, por favor!

## Compatibilidade do navegador

A propriedade `position: sticky` funciona em todos os navegadores modernos, mas atualmente não pode ser usada em elementos `thead` ou `tr` no Chrome ou Edge (embora funcione nos elementos th).

Não tem suporte no IE 11 e anteriores e em alguns navegadores mobile mais básicos.

Alguns navegadores webkit exigem o prefixo `-webkit-` (`position: -webkit-sticky`), então você deve sempre incluí-lo por enquanto.

## Como evitar que anchor links "scrolem" para trás de um header fixo

Um problema com `sticky headers` são os `anchor links`. Por default, eles se ajustam ao topo do document, atrás do `sticky navigation menu`.

Você mesmo pode ver nesta [demonstração](https://codepen.io/cferdinandi/pen/vYOZMRN?mc_cid=e609c66543).

Hoje, quero falar sobre um "CSS one-liner" que você pode usar para corrigir isso.

### A propriedade scroll-margin-top

A propriedade `scroll-margin-top` permite definir uma "top margin" que o navegador deve usar ao "snapping" um elemento "scrolado" no lugar.

Em nossa demonstração, cada "anchored element" também possui uma classe CSS `.section`. 

```html
<article class="section" id="a">
    <h2>Section A</h2>
</article>
```

```css
.section {
    color: #ffffff;
    height: 75vh;
    margin: 0;
}
```

Adicionaremos a propriedade `scroll-margin-top` a ela e daremos a ela o valor `1em`. 

```css
.section {
    color: #ffffff;
    height: 75vh;
    margin: 0;
    scroll-margin-top: 1em;
}
```

Agora, quando o navegador pular para o `anchor link`, deixará uma _margin_ de `1em` no topo.

Esta margin se aplica apenas ao `scroll snapping`. O elemento ainda possui suas margens normais dentro do contexto do document.

Aqui está uma [demonstração](https://codepen.io/cferdinandi/pen/GRJvozN).

## Compatibilidade do navegador

A propriedade `scroll-margin-top` funciona em todos os navegadores modernos, mas não tem suporte para IE.

## Fonte

Newsletter de [Go Make Things](https://gomakethings.com/)