Complemento de elemento Sticky de navegador cruzado con JavaScript puro-HC-Sticky

Vista prévia

Descripción

Esta es una versión pura de JavaScript del HC-Sticky jQuery plugin que hace que cualquier elemento sea pegajoso en la parte superior de la página web utilizando JavaScript puro.

Funcionamiento

Instale & importar.

# NPM
$ npm install hc-sticky --save

import hcSticky from 'hc-sticky';

O incluya el archivo JavaScript compilado ' HC-Sticky. js ' en la Página Web.

<script src="hc-sticky.js"></script>

Inicialice la biblioteca y especifique el elemento que se debe atascarse.

var Sticky = new hcSticky('#sidebar', {


// options here
});

Todas las opciones posibles del plugin.

var Sticky = new hcSticky('#sidebar', {


top: 0,


bottom: 0,


bottomEnd: 0,


innerTop: 0,


innerSticker: null, // Element inside of the sticky element at which to attach HC-Sticky.


 stickyClass: 'sticky',


stickTo: null, // Element that represents the reference for height instead of height of the container.


followScroll: true,


queries: null, // Object containing responsive breakpoints.


queryFlow: 'down',


responsive: null, // Object containing responsive breakpoints


mobileFirst: false, // Direction of the responsive queries.


onStart: null,


onStop: null,


onBeforeResize: null,


onResize: null,


resizeDebounce: 100,


disable: false
});

API methods.

var Sticky = new hcSticky('#sidebar');

// updates options
Sticky.update({

// options here
});

// re-init the plugin
Sticky.reinit();

// Detaches the plugin from element
Sticky.detach();

// Attaches the plugin back to the element.
Sticky.attach();

// Destroys the plugin
Sticky.destroy();

Registro de cambios

v2.2.3 (09/22/2018)

• actualizar