Merge branch 'develop'

dist/sticky.compile.js

@@ -5,10 +5,10 @@ var _createClass = function () { function defineProperties(target, props) { for
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var Sticky = function () {
-  function Sticky(element) {
+  function Sticky(selector) {
     _classCallCheck(this, Sticky);
 
-    this.element = element;
+    this.selector = selector;
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
@@ -21,17 +21,18 @@ var Sticky = function () {
     value: function initialize() {
       var _this = this;
 
-      var stickyElements = document.querySelectorAll(this.element);
+      this.elements = document.querySelectorAll(this.selector);
 
-      var _loop = function _loop(i, len) {
-        window.addEventListener('load', function () {
-          return _this.activate(stickyElements[i]);
-        });
-      };
+      // initialize sticky only when dom is fully loaded
+      var DOMContentLoaded = setInterval(function () {
+        if (document.readyState === 'interactive' || document.readyState === 'complete') {
+          for (var i = 0, len = _this.elements.length; i < len; i++) {
+            _this.activate(_this.elements[i]);
+          }
 
-      for (var i = 0, len = stickyElements.length; i < len; i++) {
-        _loop(i, len);
-      }
+          clearInterval(DOMContentLoaded);
+        }
+      }, 100);
     }
   }, {
     key: 'activate',
@@ -43,6 +44,13 @@ var Sticky = function () {
       el.sticky.marginTop = el.getAttribute('data-margin-top') ? parseInt(el.getAttribute('data-margin-top')) : 0;
       el.sticky.rect = this.getRect(el);
 
+      // fix when el is image that has not yet loaded and width, height = 0
+      if (el.tagName.toLowerCase() === 'img') {
+        el.onload = function () {
+          return el.sticky.rect = _this2.getRect(el);
+        };
+      }
+
       el.sticky.container = this.getContainer(el);
       el.sticky.container.rect = this.getRect(el.sticky.container);
 
@@ -145,6 +153,14 @@ var Sticky = function () {
         this.removeStyle(el, ['position', 'width', 'top', 'left', 'right', 'bottom']);
       }
     }
+  }, {
+    key: 'update',
+    value: function update() {
+      for (var i = 0, len = this.elements.length; i < len; i++) {
+        this.updateRect(this.elements[i]);
+        this.setPosition(this.elements[i]);
+      }
+    }
   }, {
     key: 'addStyle',
     value: function addStyle(el, styles) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sticky-js",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Sticky elements",
   "main": "dist/sticky.min.js",
   "scripts": {

src/sticky.js

@@ -1,7 +1,7 @@
 
 class Sticky {
-  constructor(element) {
-    this.element = element;
+  constructor(selector) {
+    this.selector = selector;
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
@@ -10,11 +10,18 @@ class Sticky {
   }
 
   initialize() {
-    const stickyElements = document.querySelectorAll(this.element);
+    this.elements = document.querySelectorAll(this.selector);
 
-    for (let i = 0, len = stickyElements.length; i < len; i++) {
-      window.addEventListener('load', () => this.activate(stickyElements[i]));
-    }
+    // initialize sticky only when dom is fully loaded
+    const DOMContentLoaded = setInterval(() => {
+      if (document.readyState === 'interactive' || document.readyState === 'complete') {
+        for (let i = 0, len = this.elements.length; i < len; i++) {
+          this.activate(this.elements[i]);
+        }
+
+        clearInterval(DOMContentLoaded);
+      }
+    }, 100);
   }
 
   activate(el) {
@@ -23,6 +30,11 @@ class Sticky {
     el.sticky.marginTop = el.getAttribute('data-margin-top') ? parseInt(el.getAttribute('data-margin-top')) : 0;
     el.sticky.rect = this.getRect(el);
 
+    // fix when el is image that has not yet loaded and width, height = 0
+    if (el.tagName.toLowerCase() === 'img') {
+      el.onload = () => el.sticky.rect = this.getRect(el);
+    }
+
     el.sticky.container = this.getContainer(el);
     el.sticky.container.rect = this.getRect(el.sticky.container);
 
@@ -117,6 +129,13 @@ class Sticky {
     }
   }
 
+  update() {
+    for (let i = 0, len = this.elements.length; i < len; i++) {
+      this.updateRect(this.elements[i]);
+      this.setPosition(this.elements[i]);
+    }
+  }
+
   addStyle(el, styles) {
     for (let property in styles) {
       if (styles.hasOwnProperty(property)) {