Biblioteca de JavaScript Sticky Bottom para dispositivos móviles

Vista prévia

Descripción

Una pequeña biblioteca de JavaScript vainilla que hace que los elementos sean pegajosos en la parte inferior, dentro de un elemento de contorno, en lugar de la parte superior.

Instalación

# NPM
$ npm install sticky-bottom

Funcionamiento

Importa el fondo pegajoso en tu proyecto.

<link rel="stylesheet" href="dist/sb.bundle.css">
 <script src="dist/sb.bundle.js"></script>

El ejemplo de estructura HTML.

<div class="js sticky-bottom">

<div class="sticky-bottom__boundary">


This is the boundary area, the sticky box will be around if boundary is in focus - Lorem ipsum dolor sit amet, consectetur


adipiscing elit. Phasellus vitae dolor nec est pretium interdum. Fusce non dictum metus, sed eleifend magna. Etiam


eu vehicula orci. Fusce interdum turpis ac diam vestibulum, pharetra viverra enim rhoncus. Vestibulum dui urna, volutpat


consequat ligula vel, posuere interdum massa. Sed nibh tortor, dictum in laoreet eu, imperdiet tristique nulla. Vestibulum


mollis enim quam, at auctor dolor hendrerit quis. Vivamus eu arcu turpis. Vestibulum vel rutrum ipsum. Proin id erat


pellentesque, consectetur ex dictum, porta arcu. Cras et egestas mi. Vestibulum pharetra quam neque, ac tempus turpis


auctor eu. Nulla fringilla metus posuere, pretium felis in, bibendum lacus. Suspendisse elementum ac ante ut ullamcorper.


Curabitur fringilla nulla ut eros congue sagittis at eu elit. Integer semper risus in ex tempus tristique. Orci varius


natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus auctor velit at cursus varius.


Vivamus eget ipsum nec est ultricies venenatis. Nam iaculis mi metus, id scelerisque felis tempor non.

</div>

<div class="sticky-bottom__box">


Sticky within boundary, with static height.

</div>
</div>

Cree una nueva instancia de la biblioteca de fondo pegajoso.

var stickyBottom = new StickyBottom({ /* optional config */




/* optional */


debug: ".js.sticky-bottom-debug",





 /* two-states works best for iOS/Android, default is three-states */





//renderingMode: 'two-states',





 /* optional, these Are used default query values */


elems: {



area: '.js.sticky-bottom',



box: '.sticky-bottom__box',



boundary: '.sticky-bottom__boundary',


},
});

Inicializar el fondo pegajoso y hecho.

stickyBottom.init();