Mobile-friendly Sticky Bottom JavaScript Library

Preview:

Description:

A small vanilla JavaScript library which makes elements sticky at the bottom, within a boundary element, instead of the top.

Installation:

# NPM
$ npm install sticky-bottom

How to use it:

Import the sticky-bottom into your project.

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

The example HTML structure.

<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>

Create a new instance of the sticky-bottom library.

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',
    },
});

Initialize the sticky-bottom and done.

stickyBottom.init();