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.
