1.1.8

Author: rgalus

bower.json

@@ -18,5 +18,5 @@
     "test",
     "tests"
   ],
-  "version": "1.1.7"
+  "version": "1.1.8"
 }

dist/sticky.compile.js

@@ -4,7 +4,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Cons
  * Sticky.js
  * Library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.
  *
- * @version 1.1.7
+ * @version 1.1.8
  * @author Rafal Galus <[email protected]>
  * @website https://rgalus.github.io/sticky-js/
  * @repo https://github.com/rgalus/sticky-js
@@ -27,13 +27,14 @@ var Sticky = function () {
     this.selector = selector;
     this.elements = [];
 
-    this.version = '1.1.7';
+    this.version = '1.1.8';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
     this.body = document.querySelector('body');
 
     this.options = {
+      wrap: options.wrap || false,
       marginTop: options.marginTop || 0,
       stickyFor: options.stickyFor || 0,
       stickyClass: options.stickyClass || null,
@@ -84,6 +85,7 @@ var Sticky = function () {
     element.sticky.marginTop = parseInt(element.getAttribute('data-margin-top')) || this.options.marginTop;
     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
     // element.sticky.stickyContainer = element.getAttribute('data-sticky-container') || this.options.stickyContainer;
     element.sticky.stickyContainer = this.options.stickyContainer;
@@ -100,10 +102,26 @@ var Sticky = function () {
       };
     }
 
+    if (element.sticky.wrap) {
+      this.wrapElement(element);
+    }
+
     // activate rendered element
     this.activate(element);
   };
 
+  /**
+   * Wraps element into placeholder element
+   * @function
+   * @param {node} element - Element to be wrapped
+   */
+
+
+  Sticky.prototype.wrapElement = function wrapElement(element) {
+    element.insertAdjacentHTML('beforebegin', '<span></span>');
+    element.previousSibling.appendChild(element);
+  };
+
   /**
    * Function that activates element when specified conditions are met and then initalise events
    * @function
@@ -220,6 +238,14 @@ var Sticky = function () {
       element.sticky.rect = this.getRectangle(element);
     }
 
+    if (element.sticky.wrap) {
+      this.css(element.parentNode, {
+        display: 'block',
+        width: element.sticky.rect.width + 'px',
+        height: element.sticky.rect.height + 'px'
+      });
+    }
+
     if (element.sticky.rect.top === 0 && element.sticky.container === this.body) {
       this.css(element, {
         position: 'fixed',
@@ -236,19 +262,29 @@ var Sticky = function () {
 
       if (this.scrollTop + element.sticky.rect.height + element.sticky.marginTop > element.sticky.container.rect.top + element.sticky.container.offsetHeight) {
 
-        if (element.sticky.stickyClass) element.classList.remove(element.sticky.stickyClass);
+        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' });
       } else {
-        if (element.sticky.stickyClass) element.classList.add(element.sticky.stickyClass);
+        if (element.sticky.stickyClass) {
+          element.classList.add(element.sticky.stickyClass);
+        }
 
         this.css(element, { top: element.sticky.marginTop + 'px' });
       }
     } else {
-      if (element.sticky.stickyClass) element.classList.remove(element.sticky.stickyClass);
+      if (element.sticky.stickyClass) {
+        element.classList.remove(element.sticky.stickyClass);
+      }
 
       this.css(element, { position: '', width: '', top: '', left: '' });
+
+      if (element.sticky.wrap) {
+        this.css(element.parentNode, { display: '', width: '', height: '' });
+      }
     }
   };
 

dist/sticky.min.js

@@ -1,6 +1,6 @@
 {
   "name": "sticky-js",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "Sticky elements",
   "main": "index.js",
   "scripts": {

dist/sticky.min.js.gz

@@ -3,7 +3,7 @@
  * Sticky.js
  * Library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.
  *
- * @version 1.1.7
+ * @version 1.1.8
  * @author Rafal Galus <[email protected]>
  * @website https://rgalus.github.io/sticky-js/
  * @repo https://github.com/rgalus/sticky-js
@@ -21,7 +21,7 @@ class Sticky {
     this.selector = selector;
     this.elements = [];
 
-    this.version = '1.1.7';
+    this.version = '1.1.8';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();