Auto Mostrar/ocultar encabezado deslizante con JavaScript puro-slidingHeader. js

Tiempo de ejecución: 30 minutos. Empezar

Autor: vascomarques
Views Total: 3,054
Sitio oficial: Ir a la web
Actualizado: June 24, 2015
Licencia: MIT

Vista prévia

Auto Mostrar/ocultar encabezado deslizante con JavaScript puro-slidingHeader. js

Descripción

Un plugin de JavaScript vainilla utilizado para crear una navegación de encabezado Sticky que auto oculta al desplazarse hacia abajo y aparece de nuevo cuando se desplaza hacia arriba la Página Web.

Funcionamiento

Descargue e importe el script slidingHeader. js en su página web.

<script src="js/slidingHeader.js"></script>

Cree un encabezado de navegación envuelto en la etiqueta de encabezado.

<header>

Header navigation here
</header>

Inicialice el complemento y agregue una clase CSS a la navegación del encabezado mientras desplaza la Página Web.

var slidingHeader = new SlidingHeader({



element: 'header',



class: 'scrolled'
});

Agregar animaciones personalizadas a la navegación del encabezado.

.scrolled {

transform: translateY(-100%);
}

Te puede interesar: