update dist

dist/sticky.compile.js

@@ -14,9 +14,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * @repo https://github.com/rgalus/sticky-js
  * @license https://github.com/rgalus/sticky-js/blob/master/LICENSE
  */
-var Sticky =
-/*#__PURE__*/
-function () {
+var Sticky = /*#__PURE__*/function () {
   /**
    * Sticky instance constructor
    * @constructor
@@ -36,7 +34,9 @@ function () {
     this.body = document.querySelector('body');
     this.options = {
       wrap: options.wrap || false,
+      wrapWith: options.wrapWith || '<span></span>',
       marginTop: options.marginTop || 0,
+      marginBottom: options.marginBottom || 0,
       stickyFor: options.stickyFor || 0,
       stickyClass: options.stickyClass || null,
       stickyContainer: options.stickyContainer || 'body'
@@ -86,6 +86,7 @@ function () {
 
       element.sticky.active = false;
       element.sticky.marginTop = parseInt(element.getAttribute('data-margin-top')) || this.options.marginTop;
+      element.sticky.marginBottom = parseInt(element.getAttribute('data-margin-bottom')) || this.options.marginBottom;
       element.sticky.stickyFor = parseInt(element.getAttribute('data-sticky-for')) || this.options.stickyFor;
       element.sticky.stickyClass = element.getAttribute('data-sticky-class') || this.options.stickyClass;
       element.sticky.wrap = element.hasAttribute('data-sticky-wrap') ? true : this.options.wrap; // @todo attribute for stickyContainer
@@ -118,7 +119,7 @@ function () {
   }, {
     key: "wrapElement",
     value: function wrapElement(element) {
-      element.insertAdjacentHTML('beforebegin', '<span></span>');
+      element.insertAdjacentHTML('beforebegin', element.getAttribute('data-sticky-wrapWith') || this.options.wrapWith);
       element.previousSibling.appendChild(element);
     }
     /**
@@ -236,7 +237,7 @@ function () {
   }, {
     key: "onScrollEvents",
     value: function onScrollEvents(element) {
-      if (element.sticky.active) {
+      if (element.sticky && element.sticky.active) {
         this.setPosition(element);
       }
     }
@@ -279,20 +280,24 @@ function () {
           left: element.sticky.rect.left + 'px',
           width: element.sticky.rect.width + 'px'
         });
+
+        if (element.sticky.stickyClass) {
+          element.classList.add(element.sticky.stickyClass);
+        }
       } else if (this.scrollTop > element.sticky.rect.top - element.sticky.marginTop) {
         this.css(element, {
           position: 'fixed',
           width: element.sticky.rect.width + 'px',
           left: element.sticky.rect.left + 'px'
         });
 
-        if (this.scrollTop + element.sticky.rect.height + element.sticky.marginTop > element.sticky.container.rect.top + element.sticky.container.offsetHeight) {
+        if (this.scrollTop + element.sticky.rect.height + element.sticky.marginTop > element.sticky.container.rect.top + element.sticky.container.offsetHeight - element.sticky.marginBottom) {
           if (element.sticky.stickyClass) {
             element.classList.remove(element.sticky.stickyClass);
           }
 
           this.css(element, {
-            top: element.sticky.container.rect.top + element.sticky.container.offsetHeight - (this.scrollTop + element.sticky.rect.height) + 'px'
+            top: element.sticky.container.rect.top + element.sticky.container.offsetHeight - (this.scrollTop + element.sticky.rect.height + element.sticky.marginBottom) + 'px'
           });
         } else {
           if (element.sticky.stickyClass) {