Fixar menu no topo CSS

Fixar o menu no topo da página é um recurso que é muito utilizado em sites e blogs, esse recurso permite deixar o menu sempre disponível para o usuário, para que não seja preciso rolar toda a página de volta ao topo para poder navegar pelo site ou blog.

Esse recurso não é complicado de fazer, pode-se conseguir esse efeito apenas com CSS, mas demonstrarei como fazer apenas com CSS e também com auxílio de JavaScript.

Fixar menu no topo - HTML e CSS

HTML

Primeiro vamos criar um HTML básico para demonstrar a funcionalidade.


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="author" content="Everson da Luz">
        <title>Fixar menu no topo - CSS</title>
    </head>
    <body>
        <header class="header">
            <nav class="menu">
                <ul>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">Sobre</a>
                    </li>
                    <li>
                        <a href="#">Produtos</a>
                    </li>
                    <li>
                        <a href="#">Contato</a>
                    </li>
                </ul>
            </nav>
        </header>
        <main class="main">
            <section class="content">
                <h1>Titulo da página</h1>
                <p>
                    Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                    when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                    It has survived not only five centuries, but also the leap into electronic 
                    typesetting, remaining essentially unchanged
                </p>
            </section>
        </main>
        <footer class="footer">
            <p>Todos os direitos reservados</p>
        </footer>
    </body>
</html>

CSS

Vamos adicionar um estilo para deixar mais claro o exemplo.


* {
    margin: 0;
    padding: 0;
}
.header {
    width: 100%;
}
.menu {
    background-color: #666666;
    text-align: center;
}
.menu ul li {
    display: inline-block;
}
.menu ul li a {
    display: block;
    color: #FFFFFF;
    padding: 30px 10px;
}
.main {
    padding: 50px 0;
}
.content {
    width: 80%;
    margin: auto;
    padding: 30px;
    background-color: #eff0f1;
    height: 1000px;
}
.content h1 {
    margin-bottom: 30px;
}
.footer {
    background-color: #eff0f1;
    text-align: center;
    padding: 50px 0;
}

Agora a única coisa que falta é deixar o menu fixo no topo da página, e para isso, vou demonstrar como fazer utilizando o position: sticky, position: fixed, e também com JavaScript.

Utilizando position sticky

O valor sticky da propriedade position foi introduzido no CSS em meados de 2016. E para essa finalidade ele é muito útil, pois, o valor sticky funciona como um hibrido entre o position: relative e o position: fixed, fazendo o elemento se comportar de forma relativa dentro do seu elemento pai até que se role a página até alcançar o seu topo, e depois disso ele se torna fixo na tela.

Se quer saber mais o que é position: relative e position: fixed, e também sobre outros valores da propriedade position, acesse esse link position-css, nele eu explico com detalhes sobre cada valor da propriedade position.

Voltando ao assunto, adicione o pedaço de trecho de código em seu CSS:


.header {
    position: -webkit-sticky; /* Necessário para funcionar no Safari */
    position: sticky;
    top: 0;
}

Apenas isso já será o suficiente para deixar o menu fixo no topo, o problema de fazer dessa forma é que até o momento da escrita desse artigo, o position: sticky ainda não é suportado pelo IE e versões inferiores do Edge 15, e também, o Safari requer um prefixo -webkit- para funcionar.

Utilizando position fixed

Outra forma de fixar o menu no topo apenas com CSS é utilizando o position: fixed mantendo o menu sempre fixo no topo da página. Mas como os elementos definidos como position: fixed ficam por cima de outros elementos, devemos colocar um pequeno espaço no topo da página utilizando margin ou padding no elemento body, esse espaço pode ser exatamente a altura do menu. Adicione o seguinte trecho de código em seu CSS:


body {
    padding-top: 80px; /* Altura do menu */
}
.header {
    position: fixed;
    top: 0;
}

Utilizando JavaScript

Para fixar o menu no topo utilizando JavaScript você deve saber a distância atual do menu em relação à página, e depois cada vez que a página for rolado, comparar se o top da página ultrapassou essa distância. Coloque a função a seguir em sua página:


window.onload = function(e) {
    var offset = document.getElementsByClassName('header')[0].offsetTop;
    var menu = document.getElementsByClassName('header')[0];

    document.addEventListener('scroll', function() {
        if (document.body.scrollTop > offset || document.documentElement.scrollTop > offset) {
            menu.style.position = 'fixed';
        } else {
            menu.style.position = 'initial';
        }
    });
}

Apenas esse trecho de código JavaScript já é o suficiente, não precisa alterar seu CSS.

Conclusão

Optando por qualquer uma dessas formas você consegue obter o recurso de fixar o menu no topo. Vou deixar uma demonstração com o código completo de cada uma delas nos links abaixo.