Planos a partir de R$ 32/mês Inscreva-se Agora

Diminuir o Menu fixo ao Scroll

Código | 8.313 | 15 de novembro de 2016

Um menu fixo pode ser uma boa solução de UX Design, pois permite que o usuário navegue entre as principais páginas do site a qualquer momento durante a navegação.

Mas caso este ocupe uma boa área do site, passará a ser uma distração para o usuário. Se você possui um menu fixo com um valor alto de height, o ideal é diminuir ele uma vez que o usuário comece a navegar pela página.

See the Pen ZBpGaR by Andre Origamid (@origamid) on CodePen.

É bem simples fazer isso com jQuery. A lógica é a seguinte:



$(window).on('scroll', _.debounce(function() {
    var $nav = $('nav'),
        navHeight = $nav.outerHeight(),
        windowTop = $(this).scrollTop();
    
    if (windowTop > navHeight) {
        $nav.addClass('small');
        $('nav > a').text('TC');
    } else {
        $nav.removeClass('small');
        $('nav > a').text('The Company');
    }
}, 200));

Agora vamos por partes:

1 – Para identificar se o usuário utilizou o scroll, eu uso o método .on(‘scroll’, function(){}); Antes de ativar a função eu adicionei um _.debounce(), ele serve praticamente para impedir que a função seja ativada diversas vezes ao scroll, ele garante apenas uma execução da função a cada 200ms. Esse _.debounce foi carregado da biblioteca lodash.


// Aciona a função toda vez que o scroll é utilizado
$(window).on('scroll', _.debounce(function() {

// Utiliza 200ms com o _.debounce, para evitar excessivas ativações da função.
}, 200));

2 – Agora identificamos a distância entre o scroll e o topo, assim como o height total do nosso menu.


// Coloca o menu em uma variável
var $nav = $('nav'),
// Identifica o height total do menu
    navHeight = $nav.outerHeight(),
// Identifica a distância entre o scroll e o topo
    windowTop = $(this).scrollTop();

3 – Por último comparamos os valores anteriores e adicionamos a classe para diminuir o menu. Essa classe pode conter qualquer estilo que você quiser, no meu exemplo eu diminuo os paddings e o font-size do menu, porém não existe limite para o que você pode fazer aqui. O objetivo é diminuir a área total ocupada pelo menu para ela não distrair o usuário.


// Verifica se a distância entre o scroll e o topo é maior que o height do menu
if (windowTop > navHeight) {
// Caso verdadeiro adiciona uma classe com nome de small ao menu
    $nav.addClass('small');
// Modifica o nome completo da empresa para uma sigla apenas
    $('nav > a').text('TC');
} else {
// Caso contrário remove a classe small do menu
    $nav.removeClass('small');
// Modifica a sigla para o nome completo da empresa
    $('nav > a').text('The Company');
}

Mais Dicas

Otimize seu CSS com Mixins de SASS

Tipografia – Treze Palavras

HTML – h1 h2 h3 h4 h5 h6

Recomende Ao Usuário

Scroll Suave para Link Interno