Diminuir o Menu fixo ao Scroll

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:

• 1 – Identificar se o usuário usou o scroll.
• 2 – Verificar a distância total entre o scroll e o topo da página.
• 3 – Comparar essa distância com o height total do menu.
• 4 – Caso seja maior, adicionar uma classe ao menu. (Aqui você pode ir além, por exemplo, você poderia mudar a marca completa no menu por apenas o símbolo da marca).

$(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');
}