Hacer nada pegajoso en scroll-Floater
| Autor: | sz-tamas |
|---|---|
| Views Total: | 679 |
| Sitio oficial: | Ir a la web |
| Actualizado: | December 31, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Floater es una librería JavaScript simple pero configurable para hacer cualquier contenido (por ejemplo, navegación de cabecera, widgets de barra lateral) fijo en la parte superior o inferior de la página cuando se desplaza hacia abajo o hacia arriba.
Más características
- Soporta animaciones CSS3.
- Móvil amigable.
- Controladores de eventos.
Funcionamiento
Para utilizar el plugin Floater, descargue e inserte el archivo JavaScript ' Floater. js ' en el documento cuando sea necesario:
<script src="floater.js"></script>
Añada el Data-Component = "Floater" al elemento target y especifique el wrapper & contenedores primarios utilizando los siguientes atributos:
<div class="floater-wrapper"> <div class="floater" data-component="floater" data-floater-container=".content" data-floater-parent="body"> ... </div> </div>
Para config el plugin, simplemente pase las opciones al atributo Data-Floater-Options como estos:
<div class="floater-wrapper">
<div class="floater"
data-component="floater"
data-floater-container=".content"
data-floater-options='{"paddingTop": "80", "animationDuration": "100"}'>
...
</div>
</div> {
// enable animation
animate: true,
// duration of animation
animationDuration: 150,
// If it is an empty string, top calc will be forced, otherwise it is set by floater
transform: '',
// Top offset
paddingTop: 0,
// Bottom offset
paddingBottom: 0,
// Skips calc & top change under 768px
mediaUp: 768,
// Skips calc & top change above 768px
mediaDown: 768,
// If true then recalc or changing top will be skipped
standby: true
}
