Fijar elementos dentro de un contenedor específico-Sticky. ts
| Autor: | jziggas |
|---|---|
| Views Total: | 265 |
| Sitio oficial: | Ir a la web |
| Actualizado: | November 9, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Sticky. TS es un plugin de JavaScript vainilla utilizado para anclar un solo elemento o varios elementos dentro de un contenedor específico mientras se desplaza hacia abajo.
Funcionamiento
Instalar e importar:
# NPM $ npm install sticky-ts --save
import {Sticky} from 'sticky-ts' O descargue directamente el zip y luego importe el Sticky. min. js en el documento.
<script src="sticky.min.js"></script>
Cree una nueva instancia Sticky y especifique el elemento que se corregirlo en la parte superior.
<div data-sticky-container> <div class="sticky"> Element 1 </div> <div class="sticky"> Element 2 </div> ... </div>
let sticky = new Sticky('.element'); Config la librería Sticky. ts con los siguientes atributos HTML Data Attributes:
- datos-Sticky-Wrap: Establece true para envolver el elemento Sticky está en el span elemento. Evita que el contenido "salte". El valor predeterminado es false.
- datos-margen superior: Margen superior en píxeles
- datos-Sticky-for: Especifique el punto de interrupción para deshabilitar el comportamiento Sticky. El valor predeterminado es 0.
- Data-Sticky-Class: Clase (es) CSS adicional cuando se pega
<div class="sticky" data-sticky-wrap="true" data-margin-top="10" data-sticky-for="768" data-sticky-class="custom-class"> Element </div>
