menu_bar_nav_fixed_top

Voc√™ sabe como deixar a sua barra de navega√ß√£o fixa em seu sistema ou site depois de fazer o scroll da p√°gina? Essa parte √© mais para pessoas que gostam de deixar o seu sistema visual bonito e com op√ß√Ķes sempre ativas para os usu√°rios.

Primeiro de tudo é necessário usar o boostrap como padrão em seu site, assim você deixa o visual bonito e interessante para o usuário. Depois disso, é necessário utilizar a tag html chamada <nav>.

Código do menu

<nav id="navbar_top" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light border-bottom box-shadow mb-3" style="background-color: black;">
    <div class="container-fluid">
        <img src="logo.png" width="40px"/>
        <button class="navbar-toggler btn btn-pink" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a href="">Menu 1</a>
                </li>
                <li class="nav-item">
                    <a href="">Menu 2</a>
                </li>
                <li class="nav-item">
                    <a href="">Menu 3</a>
                </li>
                <li class="nav-item">
                    <a href="">Menu 4</a>
                </li>
                <li class="nav-item">
                    <a href="">Menu 5</a>
                </li>
                <li class="nav-item text-end align-content-end align-content-sm-end">
                    <a href="">Menu Sair</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Note que no c√≥digo do menu existe a tag navbar-expand-sm e navbar-toggleable-sm e depois disso tem o navbar-collapse que junta o menu para o bot√£o com o span navbar-toggler-icon respons√°vel por mostrar o antigo "hamburger" do lado para o usu√°rio clicar e expandir as op√ß√Ķes.

Curso de HTML na pr√°tica

Depois disso a parte que preciso fazer é colocar um id para identificar o menu <nav>. Eu coloquei o nome de id="navbar_top que me ajuda identificar o objeto da tela através do JavaScript.

O √ļtlimo passo √© adicionar um c√≥digo JavaScript para identificar o scroll do usu√°rio e mudar de forma din√Ęmica o menu, colocando assim o modo fixo depois de um certo scroll.

Aprenda sobre HTML, CSS e JavaScript na escola de HTML5 plataforma.academy

https://plataforma.academy/cursos/category/13/name/html-5

Código JavaScript

<script>
//add bar t	op fix after scroll
document.addEventListener("DOMContentLoaded", function(){
    window.addEventListener('scroll', function() {
        if (window.scrollY > 50) {
            document.getElementById('navbar_top').classList.add('fixed-top');
            // add padding top to show content behind navbar
            navbar_height = document.querySelector('.navbar').offsetHeight;
            document.body.style.paddingTop = navbar_height + 'px';
        } else {
            document.getElementById('navbar_top').classList.remove('fixed-top');
            // remove padding top from body
            document.body.style.paddingTop = '0';
        }
    });
});
</script>

Esse script eu deixei no final da página para identificar o menu depois que todos os objetos foram carregados na página HTML. Lembro que isso pode ser feito em qualquer linguagem de programação, que tenha integração com o HTML5.

O JavaScript fica analisando atrav√©s do DOMContentLoaded no evento scroll. Depois que o scroll passar de 50 window.scrollY > 50 ent√£o ser√° identificado o navbar_top e vai adicionar o fixed-top. Depois adiciono o conte√ļdo abaixo da barra de menu pelo offsetHeight e com o paggingTop. Sen√£o remove a tag fixed-top e coloca o paddingTop igual a 0.

Assim o menu na p√°gina depois do rolar a tela fica sempre fixo no topo da p√°gina para seu cliente ou usu√°rio.

Espero que tenha gostado da solu√ß√£o e explica√ß√£o. Qualquer d√ļvida pode entrar em contato comigo pelo site https://mauriciojunior.net ou no curso de HTML, CSS e JavaScript no site https://plataforma.academy.