Simple encabezado Sticky bajo demanda con Pure JS-Headhesive. js
| Autor: | markgoodyear |
|---|---|
| Views Total: | 3,033 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 3, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Headhesive. js es un simple script ligero para crear una barra de navegación superior pegajosa que sólo aparece cuando se desplaza hacia abajo por la Página Web.
Funcionamiento
Incluya el headhesive. CSS requerido en el encabezado de su documento.
<link rel="stylesheet" href="css/headhesive.css">
Crear una barra de navegación superior regular que se convertirá en un & animado fijo a medida que se desplaza hacia abajo de la página.
<header class="banner"> Your header content goes here </header>
Incluya el script Headhesive. js en la parte inferior del documento.
<script src="path/to/headhesive.js"></script>
Habilite el encabezado de la pegatina con un poco de JavaScript.
// Options
var options = {
// Scroll offset. Accepts Number or "String" (for class/ID)
offset: 300, // OR — offset: '.classToActivateAt',
// Custom classes
classes: {
// Cloned elem class
clone: 'banner--clone',
// Stick class
stick: 'banner--stick',
// Unstick class
unstick: 'banner--unstick'
},
// Throttle scroll event to fire every 250ms to improve performace
throttle: 250,
// Callbacks
onInit: function() {},
onStick: function() {},
onUnstick: function() {},
onDestroy: function() {},
}
// Create a new instance of Headhesive and pass in some options
var header = new Headhesive('.baner', options); Registro de cambios
06/16/2015
- Bugfix
