Merge branch 'develop'

Author: rgalus

README.md

@@ -2,14 +2,14 @@
 [![npm version](https://badge.fury.io/js/sticky-js.svg)](https://badge.fury.io/js/sticky-js)
 [![Bower version](https://badge.fury.io/bo/sticky.js.svg)](https://badge.fury.io/bo/sticky.js)
 
-[DEMO](https://rgalus.github.io/sticky-js/)
+> Sticky-js is a library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.
 
-Sticky-js is a library for sticky elements written in vanilla javascript. With this library you can easily set sticky elements on your website. It's also responsive.
+[DEMO](https://rgalus.github.io/sticky-js/)
 
 ## Features
 
 - Written in vanilla javascript, no dependencies needed
-- Lightweight (minified: ~5.28kb, gzipped: ~1.48kb)
+- Lightweight (minified: ~5.72kb, gzipped: ~1.63kb)
 - It can be sticky to the entire page or to selected parent container
 - No additional CSS needed
 
@@ -87,13 +87,15 @@ Update sticky, e.g. when parent container (data-sticky-container) change height
 ```js
 var sticky = new Sticky('.sticky');
 
+// and when parent change height..
 sticky.update();
 ```
 
 ## Available options
 
 Option | Type | Default | Description
 ------ | ---- | ------- | ----
+data-sticky-wrap | boolean | false | When it's `true` sticky element is wrapped in `<span></span>` which has sticky element dimensions. Prevents content from "jumping".
 data-margin-top | number | 0 | Margin between page and sticky element when scrolled
 data-sticky-for | number | 0 | Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
 data-sticky-class | string | null | Class added to sticky element when it is stuck

demo/index.html

@@ -30,6 +30,7 @@
       }
 
       img {
+        display: block;
         z-index: 2;
       }
 
@@ -66,7 +67,7 @@
         margin-top: 200px;
         background: #ecf0f1;
 
-        height: 500px;
+        min-height: 500px;
       }
 
     </style>
@@ -91,7 +92,10 @@
       <section class="container" data-sticky-container>
         <div class="row column">
           <img src="http://placehold.it/250x250" class="float-left" alt="Sticky" data-sticky data-sticky-for="1023" data-sticky-class="is-sticky" data-margin-top="100">
-          <img src="http://placehold.it/250x250" class="float-right" alt="Sticky" data-sticky data-margin-top="100">
+          <div class="float-right">
+            <img src="http://placehold.it/250x250" alt="Sticky" data-sticky data-sticky-wrap data-margin-top="100">
+            <img src="http://placehold.it/250x125/ecf0f1?text=Not+sticky" alt="Not sticky">
+          </div>
         </div>
       </section>
 

src/sticky.js

@@ -28,6 +28,7 @@ class Sticky {
     this.body = document.querySelector('body');
 
     this.options = {
+      wrap: options.wrap || false,
       marginTop: options.marginTop || 0,
       stickyFor: options.stickyFor || 0,
       stickyClass: options.stickyClass || null,
@@ -70,6 +71,7 @@ class Sticky {
     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;
@@ -84,11 +86,26 @@ class Sticky {
       element.onload = () => element.sticky.rect = this.getRectangle(element);
     }
 
+    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
+   */
+  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
@@ -202,6 +219,13 @@ class Sticky {
       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
@@ -225,20 +249,30 @@ class Sticky {
         > (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: '' });
+      }
     }
    }
 

yarn.lock

@@ -1582,15 +1582,15 @@ [email protected]:
     vinyl "^1.0.0"
 
 gulp-uglify@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/gulp-uglify/-/gulp-uglify-2.0.0.tgz#cbe4aae4fe0b6bdd760335bc46f200fff699c4af"
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/gulp-uglify/-/gulp-uglify-2.0.1.tgz#e8cfb831014fc9ff2e055e33785861830d499365"
   dependencies:
     gulplog "^1.0.0"
     has-gulplog "^0.1.0"
     lodash "^4.13.1"
     make-error-cause "^1.1.1"
     through2 "^2.0.0"
-    uglify-js "2.7.0"
+    uglify-js "2.7.5"
     uglify-save-license "^0.4.1"
     vinyl-sourcemaps-apply "^0.2.0"
 
@@ -1978,8 +1978,8 @@ jodid25519@^1.0.0:
     jsbn "~0.1.0"
 
 js-tokens@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.0.tgz#a2f2a969caae142fb3cd56228358c89366957bd1"
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.1.tgz#08e9f132484a2c45a30907e9dc4d5567b7f114d7"
 
 jsbn@~0.1.0:
   version "0.1.0"
@@ -3214,8 +3214,8 @@ [email protected]:
     socket.io-parser "2.3.1"
 
 source-map-support@^0.4.2:
-  version "0.4.10"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.10.tgz#d7b19038040a14c0837a18e630a196453952b378"
+  version "0.4.11"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.4.11.tgz#647f939978b38535909530885303daf23279f322"
   dependencies:
     source-map "^0.5.3"
 
@@ -3455,9 +3455,9 @@ [email protected]:
   version "0.7.12"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.12.tgz#04c81a99bdd5dc52263ea29d24c6bf8d4818a4bb"
 
-[email protected].0:
-  version "2.7.0"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.0.tgz#f021e38ba2ca740860f5bd5c695c2a817345f0ec"
+[email protected].5:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.7.5.tgz#4612c0c7baaee2ba7c487de4904ae122079f2ca8"
   dependencies:
     async "~0.2.6"
     source-map "~0.5.1"