Cómo crear: deslizar el navbar mientras se hace scroll
- Página anterior Menú fijo
- Página siguiente Ocultar la barra de navegación al desplazarse
Aprende a usar CSS y JavaScript para deslizar el navbar mientras se hace scroll.
Cómo deslizar el navbar hacia abajo
Primer - Añadir HTML:
Crear navbar:
<div id="navbar"> <a href="#home">Inicio</a> <a href="#news">Noticias</a> <a href="#contact">Contacto</a> </div>
Segundo - Añadir CSS:
Establecer estilo del navbar:
#navbar { background-color: #333; /* Color de fondo negro */ position: fixed; /* Hacer que se adhiera/fijar */ top: -50px; /* Ocultar el navbar 50px fuera de la vista superior */ width: 100%; /* Ancho completo */ transition: top 0.3s; /* Efecto de transición al deslizar hacia abajo (hacia arriba) */ } /* Establecer el estilo de los enlaces del navbar */ #navbar a { float: left; display: block; color: white; text-align: center; padding: 15px; text-decoration: none; } #navbar a:hover { background-color: #ddd; color: black; }
Tercero - Añadir JavaScript:
// 当用户从文档顶部向下滚动 20px 时,向下滑动导航栏 // 当用户滚动到页面顶部时,向上滑动导航栏(距顶部视图 50px) window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) { document.getElementById("navbar").style.top = "0"; } document.getElementById("navbar").style.top = "-50px"; } }
- Página anterior Menú fijo
- Página siguiente Ocultar la barra de navegación al desplazarse