<nav class="navbar fixed-top navbar-expand-sm navbar-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto "> <li class="nav-item"> <a class="nav-link link-light active" href="#a">A</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="#b">B</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="#c">C</a> </li> </ul> </div> </div> </nav>Lo que estoy tratando de hacer es que, en caso de que la resolución de la pantalla sea lo suficientemente grande como para que no aparezca colapsada, si el desplazamiento Y del usuario no está en la parte superior, la barra de navegación aparecerá colapsada (sin importar el tamaño de la pantalla) , esto es lo que intento usar js, pero no funciona y no logré encontrar algo útil sobre cómo controlar el estado real de la barra de navegación (contraído/no colapsado)... agradezco cualquier ayuda.
let navcollapse = document.getElementById('navbarSupportedContent') window.addEventListener('scroll', (e) => { if(window.scrollY == 0) { // top position // open the navbar } else { navcollapse.collapse = 'hide'; // collapse it } });-si la pantalla es pequeña para que se contraiga de forma predeterminada, nada cambiará y la barra de navegación permanecerá en estado colapsado sin importar si el desplazamiento Y está en la parte superior o no.
Justo cuando me vino a la mente la idea de cambiar los grid-breakpoints archivo Sass, me topé con un punto de interrupción de arranque con el que no estaba familiarizado... el 'XS', que colapsará la barra de navegación en pantallas grandes ya que hazlo para dimensiones mayores o iguales a 576 px (mientras que el punto de interrupción 'SM' tiene efecto en dimensiones menores a 576 px, por lo que si la pantalla es lo suficientemente pequeña, la barra de navegación permanecerá colapsada de cualquier manera según lo solicitado).
De todos modos, este es el código para colapsar la barra de navegación (se agregó una ID para el elemento de navegación en el archivo html, el código js):
Código JS:
window.addEventListener('scroll', function() { if (window.scrollY == 0) { // top position - expand navbar document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-xs'); document.getElementById('navbarscroll-spy').classList.add('navbar-expand-sm'); } else { // scrolled - collapse navbar document.getElementById('navbarscroll-spy').classList.remove('navbar-expand-sm'); document.getElementById('navbarscroll-spy').classList.add('navbar-expand-xs'); } }html:
<nav id="navbarscroll-spy" class="navbar fixed-top navbar-expand-sm navbar-light"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto "> <li class="nav-item"> <a class="nav-link link-light active" href="#a">A</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="#b">B</a> </li> <li class="nav-item"> <a class="nav-link link-light" href="#c">C</a> </li> </ul> </div> </div> </nav>