Como criar uma sticky navigation apenas com CSS

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.

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

<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 demonstração 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.

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.

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

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

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

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

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