Encabezado Sticky de JavaScript puro en scroll-header-on-scroll. js
| Autor: | amandamussio |
|---|---|
| Views Total: | 3,874 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 15, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
header-on-scroll. js es una biblioteca nativa de JavaScript que se utiliza para crear una navegación de encabezado Sticky sensible que revela al desplazarse hacia abajo y se esconde al desplazarse hacia arriba.
Funcionamiento
Cargue el estilo de hoja de estilos. CSS requerido en la sección Head para estilo de la navegación del encabezado.
<link rel="stylesheet" href="style.css">
El HTML principal para la navegación del encabezado.
<header id="header-main"> <div class="container"> <div id="menu-icon"> <span class="icon-menu-hamburguer"></span> </div> <nav id="menu-main"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Blog</a></li> </ul> </nav> </div> </header>
Coloque el archivo principal de JavaScript header-on-scroll-min. js al final del documento. Eso es todo.
<script src="header-on-scroll-min.js"></script>
