Adicionar navbar fixo depois de rolar a tela | ecode10.com

Adicionar navbar fixo depois de rolar a tela

WEBSITE

Thursday, June 20, 2024

Views: 1683 SHARE

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.

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.