Merge branch 'develop'

Author: rgalus

README.md

@@ -9,7 +9,7 @@ Sticky-js is a library for sticky elements written in vanilla javascript. With t
 ## Features
 
 - Written in vanilla javascript, no dependencies needed
-- Lightweight (minified: ~4.75kb, gzipped: ~1.41kb)
+- Lightweight (minified: ~5.12kb, gzipped: ~1.45kb)
 - It can be sticky to the entire page or to selected parent container
 - No additional CSS needed
 

bower.json

@@ -18,5 +18,5 @@
     "test",
     "tests"
   ],
-  "version": "1.1.4"
+  "version": "1.1.5"
 }

demo/index.html

@@ -40,11 +40,11 @@
       }
 
       .top-bar {
-        position: fixed;
-        top: 0;
-        left: 0;
+        /*position: fixed;*/
+        /*top: 0;*/
+        /*left: 0;*/
 
-        width: 100%;
+        /*width: 100%;*/
       }
 
       .top-bar,

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.4
+ * @version 1.1.5
  * @author Rafal Galus <[email protected]>
  * @website https://rgalus.github.io/sticky-js/
  * @repo https://github.com/rgalus/sticky-js
@@ -27,7 +27,7 @@ var Sticky = function () {
     this.selector = selector;
     this.elements = [];
 
-    this.version = '1.1.4';
+    this.version = '1.1.5';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
@@ -107,15 +107,7 @@ var Sticky = function () {
 
 
   Sticky.prototype.activate = function activate(element) {
-    var heightBefore = element.sticky.container.offsetHeight;
-
-    this.css(element, { position: 'fixed' });
-
-    var heightAfter = element.sticky.container.offsetHeight;
-
-    this.css(element, { position: '' });
-
-    if (heightAfter >= heightBefore && element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
+    if (element.sticky.rect.top + element.sticky.rect.height < element.sticky.container.rect.top + element.sticky.container.rect.height && element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
       element.sticky.active = true;
     }
 
@@ -132,6 +124,8 @@ var Sticky = function () {
       this.initScrollEvents(element);
       element.sticky.scrollEvent = true;
     }
+
+    this.setPosition(element);
   };
 
   /**
@@ -163,9 +157,9 @@ var Sticky = function () {
     element.sticky.rect = this.getRectangle(element);
     element.sticky.container.rect = this.getRectangle(element.sticky.container);
 
-    if (element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
+    if (element.sticky.rect.top + element.sticky.rect.height < element.sticky.container.rect.top + element.sticky.container.rect.height && element.sticky.stickyFor < this.vp.width && !element.sticky.active) {
       element.sticky.active = true;
-    } else if (element.sticky.stickyFor >= this.vp.width && element.sticky.active) {
+    } else if (element.sticky.rect.top + element.sticky.rect.height >= element.sticky.container.rect.top + element.sticky.container.rect.height || element.sticky.stickyFor >= this.vp.width && element.sticky.active) {
       element.sticky.active = false;
     }
 
@@ -221,7 +215,14 @@ var Sticky = function () {
       element.sticky.rect = this.getRectangle(element);
     }
 
-    if (this.scrollTop > element.sticky.rect.top - element.sticky.marginTop) {
+    if (element.sticky.rect.top === 0 && element.sticky.container === document.querySelector('body')) {
+      this.css(element, {
+        position: 'fixed',
+        top: element.sticky.rect.top + 'px',
+        left: element.sticky.rect.left + 'px',
+        width: element.sticky.rect.width + 'px'
+      });
+    } else if (this.scrollTop > element.sticky.rect.top - element.sticky.marginTop) {
       this.css(element, {
         position: 'fixed',
         width: element.sticky.rect.width + 'px',

dist/sticky.min.js

@@ -1,6 +1,6 @@
 {
   "name": "sticky-js",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "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.4
+ * @version 1.1.5
  * @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.4';
+    this.version = '1.1.5';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
@@ -90,16 +90,8 @@ class Sticky {
    * @param {node} element - Element to be activated
    */
    activate(element) {
-    const heightBefore = element.sticky.container.offsetHeight;
-
-    this.css(element, { position: 'fixed' });
-
-    const heightAfter = element.sticky.container.offsetHeight;
-
-    this.css(element, { position: '' });
-
     if (
-      (heightAfter >= heightBefore)
+      ((element.sticky.rect.top + element.sticky.rect.height) < (element.sticky.container.rect.top + element.sticky.container.rect.height))
       && (element.sticky.stickyFor < this.vp.width)
       && !element.sticky.active
     ) {
@@ -119,6 +111,8 @@ class Sticky {
       this.initScrollEvents(element);
       element.sticky.scrollEvent = true;
     }
+
+    this.setPosition(element);
    }
 
 
@@ -145,12 +139,14 @@ class Sticky {
     element.sticky.container.rect = this.getRectangle(element.sticky.container);
 
     if (
-      element.sticky.stickyFor < this.vp.width
+      ((element.sticky.rect.top + element.sticky.rect.height) < (element.sticky.container.rect.top + element.sticky.container.rect.height))
+      && (element.sticky.stickyFor < this.vp.width)
       && !element.sticky.active
     ) {
       element.sticky.active = true;
     } else if (
-      element.sticky.stickyFor >= this.vp.width
+      ((element.sticky.rect.top + element.sticky.rect.height) >= (element.sticky.container.rect.top + element.sticky.container.rect.height))
+      || element.sticky.stickyFor >= this.vp.width
       && element.sticky.active
     ) {
       element.sticky.active = false;
@@ -201,7 +197,18 @@ class Sticky {
       element.sticky.rect = this.getRectangle(element);
     }
 
-    if (this.scrollTop > (element.sticky.rect.top - element.sticky.marginTop)) {
+
+    if (
+      element.sticky.rect.top === 0
+      && element.sticky.container === document.querySelector('body')
+    ) {
+      this.css(element, {
+        position: 'fixed',
+        top: element.sticky.rect.top + 'px',
+        left: element.sticky.rect.left + 'px',
+        width: element.sticky.rect.width + 'px',
+      });
+    } else if (this.scrollTop > (element.sticky.rect.top - element.sticky.marginTop)) {
       this.css(element, {
         position: 'fixed',
         width: element.sticky.rect.width + 'px',