Una posición CSS: Sticky propiedad polyfill-StickyState

Vista prévia

Descripción

StickyState es una biblioteca de JavaScript ligera que se utiliza para polyfill CSS P osition: propiedad Sticky para navegadores sin soporte nativo. Además, permite agregar clases CSS personalizadas al elemento cuando llega a la parte superior de la Página Web.

Funcionamiento

Cargue la biblioteca de JavaScript stickystate. js en la página web cuando sea necesario.

<script src="dist/stickystate.js"></script>

Corrija un elemento en la parte superior de un contenedor específico.

<div class="container">

<div class="top sticky" id="top-a">


Fixed to viewport top A.

</div>
</div>

.sticky {

position: -webkit-sticky;

position: -moz-sticky;

position: -ms-sticky;

position: -o-sticky;

position: sticky;
}

.sticky.sticky-fixed.is-sticky {

position: fixed;

-webkit-backface-visibility: hidden;





backface-visibility: hidden;
}

.sticky.sticky-fixed.is-absolute{

position: absolute;
}

Active la posición: polyfill pegajoso para todos los navegadores.

var StickyState = require('sticky-state');
new StickyState(yourElement);
// or for all elements with class .sticky
StickyState.apply(document.querySelectorAll('.sticky'));
// for example

Opciones disponibles con valores predeterminados.

var defaults = {

disabled: false,

className: 'sticky',

fixedClass: 'sticky-fixed',

stateClassName: 'is-sticky'
};