Merge branch 'develop'

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: ~5.12kb, gzipped: ~1.45kb)
+- Lightweight (minified: ~5.28kb, gzipped: ~1.48kb)
 - 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.5"
+  "version": "1.1.6"
 }

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.5
+ * @version 1.1.6
  * @author Rafal Galus <[email protected]>
  * @website https://rgalus.github.io/sticky-js/
  * @repo https://github.com/rgalus/sticky-js
@@ -27,15 +27,17 @@ var Sticky = function () {
     this.selector = selector;
     this.elements = [];
 
-    this.version = '1.1.5';
+    this.version = '1.1.6';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
+    this.body = document.querySelector('body');
 
     this.options = {
       marginTop: options.marginTop || 0,
       stickyFor: options.stickFor || 0,
-      stickyClass: options.stickyClass || null
+      stickyClass: options.stickyClass || null,
+      stickyContainer: options.stickyContainer || 'body'
     };
 
     this.run();
@@ -82,6 +84,9 @@ 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;
+    // @todo attribute for stickyContainer
+    // element.sticky.stickyContainer = element.getAttribute('data-sticky-container') || this.options.stickyContainer;
+    element.sticky.stickyContainer = this.options.stickyContainer;
 
     element.sticky.container = this.getStickyContainer(element);
     element.sticky.container.rect = this.getRectangle(element.sticky.container);
@@ -215,7 +220,7 @@ var Sticky = function () {
       element.sticky.rect = this.getRectangle(element);
     }
 
-    if (element.sticky.rect.top === 0 && element.sticky.container === document.querySelector('body')) {
+    if (element.sticky.rect.top === 0 && element.sticky.container === this.body) {
       this.css(element, {
         position: 'fixed',
         top: element.sticky.rect.top + 'px',
@@ -274,9 +279,9 @@ var Sticky = function () {
 
 
   Sticky.prototype.getStickyContainer = function getStickyContainer(element) {
-    var container = element;
+    var container = element.parentNode;
 
-    while (!container.hasAttribute('data-sticky-container') && container !== document.querySelector('body')) {
+    while (!container.hasAttribute('data-sticky-container') && !container.parentNode.querySelector(element.sticky.stickyContainer) && container !== this.body) {
       container = container.parentNode;
     }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sticky-js",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "Sticky elements",
   "main": "index.js",
   "scripts": {
@@ -25,10 +25,10 @@
   },
   "homepage": "https://github.com/rgalus/sticky-js#readme",
   "devDependencies": {
-    "babel-core": "^6.14.0",
-    "babel-preset-es2015": "^6.14.0",
-    "babel-register": "^6.14.0",
-    "browser-sync": "^2.15.0",
+    "babel-core": "^6.18.2",
+    "babel-preset-es2015": "^6.18.0",
+    "babel-register": "^6.18.0",
+    "browser-sync": "^2.18.2",
     "del": "^2.2.2",
     "gulp": "github:gulpjs/gulp#4.0",
     "gulp-babel": "^6.1.2",

src/sticky.js

@@ -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.5
+ * @version 1.1.6
  * @author Rafal Galus <[email protected]>
  * @website https://rgalus.github.io/sticky-js/
  * @repo https://github.com/rgalus/sticky-js
@@ -21,15 +21,17 @@ class Sticky {
     this.selector = selector;
     this.elements = [];
 
-    this.version = '1.1.5';
+    this.version = '1.1.6';
 
     this.vp = this.getViewportSize();
     this.scrollTop = this.getScrollTopPosition();
+    this.body = document.querySelector('body');
 
     this.options = {
       marginTop: options.marginTop || 0,
       stickyFor: options.stickFor || 0,
       stickyClass: options.stickyClass || null,
+      stickyContainer: options.stickyContainer || 'body',
     };
 
     this.run();
@@ -68,6 +70,9 @@ 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;
+    // @todo attribute for stickyContainer
+    // element.sticky.stickyContainer = element.getAttribute('data-sticky-container') || this.options.stickyContainer;
+    element.sticky.stickyContainer = this.options.stickyContainer;
 
     element.sticky.container = this.getStickyContainer(element);
     element.sticky.container.rect = this.getRectangle(element.sticky.container);
@@ -200,7 +205,7 @@ class Sticky {
 
     if (
       element.sticky.rect.top === 0
-      && element.sticky.container === document.querySelector('body')
+      && element.sticky.container === this.body
     ) {
       this.css(element, {
         position: 'fixed',
@@ -260,11 +265,12 @@ class Sticky {
    * @return {node} element - Sticky container
    */
    getStickyContainer(element) {
-    let container = element;
+    let container = element.parentNode;
 
     while (
       !container.hasAttribute('data-sticky-container')
-      && container !== document.querySelector('body')
+      && !container.parentNode.querySelector(element.sticky.stickyContainer)
+      && container !== this.body
     ) {
       container = container.parentNode;
     }