diff --git a/dist/sticky.compile.js b/dist/sticky.compile.js index 245dbef..7c8bc68 100644 --- a/dist/sticky.compile.js +++ b/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) { diff --git a/dist/sticky.min.js b/dist/sticky.min.js index 9a0ceb3..9a3e7d3 100644 --- a/dist/sticky.min.js +++ b/dist/sticky.min.js @@ -1 +1 @@ -"use strict";function _classCallCheck(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function t(t,e){for(var i=0;it.sticky.rect.top-t.sticky.marginTop?(this.addStyle(t,{position:"fixed",width:t.sticky.rect.width+"px",left:t.sticky.rect.left+"px",right:"auto",bottom:"auto"}),this.scrollTop+t.sticky.rect.height+t.sticky.marginTop>t.sticky.container.rect.top+t.sticky.container.rect.height?this.addStyle(t,{top:t.sticky.container.rect.top+t.sticky.container.rect.height-(this.scrollTop+t.sticky.rect.height)+"px"}):this.addStyle(t,{top:t.sticky.marginTop+"px"})):this.removeStyle(t,["position","width","top","left","right","bottom"]))}},{key:"addStyle",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t.style[i]=e[i])}},{key:"removeStyle",value:function(t,e){for(var i=0,o=e.length;it.sticky.rect.top-t.sticky.marginTop?(this.addStyle(t,{position:"fixed",width:t.sticky.rect.width+"px",left:t.sticky.rect.left+"px",right:"auto",bottom:"auto"}),this.scrollTop+t.sticky.rect.height+t.sticky.marginTop>t.sticky.container.rect.top+t.sticky.container.rect.height?this.addStyle(t,{top:t.sticky.container.rect.top+t.sticky.container.rect.height-(this.scrollTop+t.sticky.rect.height)+"px"}):this.addStyle(t,{top:t.sticky.marginTop+"px"})):this.removeStyle(t,["position","width","top","left","right","bottom"]))}},{key:"update",value:function(){for(var t=0,e=this.elements.length;t 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)) {