Posición de JavaScript puro: Polyrellenos pegajosos-Stickybits

Vista prévia

Descripción

Un JavaScript sólo CSS posición: Sticky polyfill que hace que cualquier elemento pegajoso en la parte superior (e incluso inferior) de la pantalla cuando se desplaza hacia abajo.

Instalación

# Yarn
yarn add stickybits

# NPM
$ npm install stickybits

# Bower
$ bower install stickybits

Funcionamiento

Importe los Stickybits en su proyecto.

<script src="dist/stickybits.min.js"></script>

Cree un nuevo objeto Stickybits y especifique el elemento que se debe atascarse en la parte superior de la ventana en el desplazamiento vertical de la página.

stickybits('selector');

Configuración de los Stickybits. Puede pasar las siguientes opciones como segundo parámetro al objeto ' Stickybits ':

stickybits('selector',{


// the scroll duration for when .js-is-sticky--change is added

customStickyChangeNumber: null,


// without inline styles except for position: sticky or position: fixed

noStyles: false,


// offset in pixels

stickyBitStickyOffset: 0,


// custom Scroll Element

scrollEl: window,


// default CSS classes

parentClass: 'js-stickybit-parent',

stickyClass: 'js-is-sticky',

stuckClass: 'js-is-stuck',

stickyChangeClass: 'js-is-sticky--change',


// use position: sticky or position: fixed

useFixed: false,


// or bottom

verticalPosition: 'top',


// add and remove sticky CSS Classes

// .js-is-sticky and .js-is-stuck

useStickyClasses: true,


// to not use offsetTop

useGetBoundingClientRect: false


});

Registro de cambios

10/05/2018

• v3.5.6