@glitchr/stickyjs 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@glitchr/stickyjs",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "description": "Sticky scroll library",
   "main": "src/index.js",
   "repository": {

package/src/js/sticky.js

@@ -12,8 +12,8 @@
         var fallback  = $(newHash).length === 0;
 
         var hashElement = $(newHash)[0] ?? undefined;
-        if (hashElement !== undefined) // Update hash only if element is displayed
-            fallback |= window.getComputedStyle(hashElement)["display"] == "none";
+        // if (hashElement !== undefined) // Update hash only if element is displayed
+        //     fallback |= window.getComputedStyle(hashElement)["display"] == "none";
 
         if((skipIfEmptyIdentifier && !newHash) || fallback){
 
@@ -196,7 +196,7 @@ $.fn.serializeObject = function () {
         "scrollcatch": false,
         "scrolllock" : true,
         "scrollhide" : true,
-        "scrollhint" : 0.5,
+        "scrollhint" : 0.25,
 
         //
         // Manual overscroll detection (browser compatibility, e.g. scroll event missing with Firefox)
@@ -207,6 +207,8 @@ $.fn.serializeObject = function () {
             "right":false ,
         },
 
+        "scrollpercent"           : true   ,
+
         "scrollsnap"           : true   ,
         "scrollsnap_start"     : "start", //start, center, end
         "scrollsnap_proximity" : 0.01   ,
@@ -249,12 +251,12 @@ $.fn.serializeObject = function () {
     Sticky.parseDuration = function(str) {
 
         var array = String(str).split(", ");
-            array = array.map(function(t) {
+        array = array.map(function(t) {
 
-                if(String(t).endsWith("ms")) return parseFloat(String(t))/1000;
+            if(String(t).endsWith("ms")) return parseFloat(String(t))/1000;
 
-                return parseFloat(String(t));
-            });
+            return parseFloat(String(t));
+        });
 
         return Math.max(...array);
     }
@@ -267,13 +269,13 @@ $.fn.serializeObject = function () {
         if(str === undefined) return undefined;
 
         var array = String(str).split(", ");
-            array = array.map(function(s) {
+        array = array.map(function(s) {
 
-                     if(s.endsWith("rem")) return Sticky.remToPixel    (s);
-                else if(s.endsWith("em") ) return Sticky.emToPixel     (s, el);
-                else if(s.endsWith("%")  ) return Sticky.percentToPixel(s, el);
-                return parseFloat(s);
-            });
+            if(s.endsWith("rem")) return Sticky.remToPixel    (s);
+            else if(s.endsWith("em") ) return Sticky.emToPixel     (s, el);
+            else if(s.endsWith("%")  ) return Sticky.percentToPixel(s, el);
+            return parseFloat(s);
+        });
 
         return Math.max(...array);
     }
@@ -281,13 +283,13 @@ $.fn.serializeObject = function () {
     Sticky.getScrollPadding = function(el = document.documentElement) {
 
         var scroller = $(el).closestScrollable()[0];
-        var style  = window.getComputedStyle(scroller);
+        var style    = scroller instanceof Element ? window.getComputedStyle(scroller) : {};
 
         var dict = {};
-            dict["top"   ] = Sticky.parseToPixel(style["scroll-padding-top"   ] || 0, scroller);
-            dict["left"  ] = Sticky.parseToPixel(style["scroll-padding-left"  ] || 0, scroller);
-            dict["right" ] = Sticky.parseToPixel(style["scroll-padding-right" ] || 0, scroller);
-            dict["bottom"] = Sticky.parseToPixel(style["scroll-padding-bottom"] || 0, scroller);
+        dict["top"   ] = Sticky.parseToPixel(style["scroll-padding-top"   ] || 0, scroller);
+        dict["left"  ] = Sticky.parseToPixel(style["scroll-padding-left"  ] || 0, scroller);
+        dict["right" ] = Sticky.parseToPixel(style["scroll-padding-right" ] || 0, scroller);
+        dict["bottom"] = Sticky.parseToPixel(style["scroll-padding-bottom"] || 0, scroller);
 
         if(isNaN(dict["top"   ])) dict["top"]    = 0;
         if(isNaN(dict["left"  ])) dict["left"]   = 0;
@@ -303,8 +305,8 @@ $.fn.serializeObject = function () {
         el = el === window ? document.documentElement : el;
         el = $(el).length ? $(el)[0] : undefined;
 
-        var targetData = jQuery.data(el || document.documentElement);
-        Object.keys(targetData).forEach((key) => delete targetData[key]);
+        var data = jQuery.data(el || document.documentElement);
+        Object.keys(data).forEach((key) => delete data[key]);
 
         return this;
     }
@@ -396,6 +398,8 @@ $.fn.serializeObject = function () {
         return this;
     }
 
+    var previousData = {};
+    var previousDataTimestamp = undefined;
     Sticky.compute = function(event) {
 
         if (event.target === undefined  )
@@ -412,29 +416,36 @@ $.fn.serializeObject = function () {
         if ($(event.target).prop("user-scroll") === undefined)
             $(event.target).prop("user-scroll", true);
 
-        var targetData = jQuery.data(event.target);
-        var first  = (Object.keys(targetData).length === 0);
+        var target = event.target[0];
+        var targetData = jQuery.data(target);
+        if (previousDataTimestamp != event.timeStamp) {
+            previousData[target] = Object.assign({}, targetData);
+            previousDataTimestamp = event.timeStamp;
+        }
 
-        var top    = targetData.top    || 0;
-        var left   = targetData.left   || 0;
-        var bottom = targetData.bottom || 0;
-        var right  = targetData.right  || 0;
+        var first  = (Object.keys(targetData).length === 0);
+        var top    = targetData.scrollableY ? previousData[target].top    : 0;
+        var left   = targetData.scrollableX ? previousData[target].left   : 0;
+        var bottom = targetData.scrollableY ? previousData[target].bottom : 0;
+        var right  = targetData.scrollableX ? previousData[target].right  : 0;
 
         // Screen & viewport positioning
         targetData.first   = first;
         targetData.elastic = targetData.elastic || false;
         targetData.vw      = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
         targetData.vh      = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
-        targetData.sw      = event.target[0].scrollWidth  || 0;
-        targetData.sh      = event.target[0].scrollHeight || 0;
-        targetData.width   = event.target[0].clientWidth  || 0;
-        targetData.height  = event.target[0].clientHeight || 0;
+        targetData.sw      = target.scrollWidth  || 0;
+        targetData.sh      = target.scrollHeight || 0;
+        targetData.width   = target.clientWidth  || 0;
+        targetData.height  = target.clientHeight || 0;
+        targetData.scrollableX = target.scrollWidth  > target.clientWidth;
+        targetData.scrollableY = target.scrollHeight > target.clientHeight;
 
         // Scrolling information
-        targetData.top     = event.target.scrollTop();
-        targetData.bottom  = Math.round(targetData.sh - event.target.scrollTop() - targetData.height);
-        targetData.left    = event.target.scrollLeft();
-        targetData.right   = Math.round(targetData.sw  - event.target.scrollLeft() - targetData.width);
+        targetData.top     = targetData.scrollableY ? event.target.scrollTop() : 0;
+        targetData.bottom  = targetData.scrollableY ? Math.round(targetData.sh - event.target.scrollTop() - targetData.height) : 0;
+        targetData.left    = targetData.scrollableX ? event.target.scrollLeft() : 0;
+        targetData.right   = targetData.scrollableX ? Math.round(targetData.sw  - event.target.scrollLeft() - targetData.width) : 0;
 
         if(first) {
 
@@ -460,25 +471,25 @@ $.fn.serializeObject = function () {
         if (targetData.right  == 0 && targetData.right < right)
             targetData.rightCounter  = (targetData.right  == 0 && right  > 0 ? targetData.rightCounter  + 1 : targetData.rightCounter ) || 0;
 
-        targetData.bottomElastic = targetData.bottom < 0;
+        targetData.bottomElastic = targetData.bottom < 0 && targetData.scrollableY;
         if(Sticky.get("overscroll").bottom) {
             targetData.bottomElastic = true;
             targetData.bottom = -1;
         }
 
-        targetData.topElastic    = targetData.top < 0;
+        targetData.topElastic    = targetData.top < 0 && targetData.scrollableY;
         if(Sticky.get("overscroll").top) {
             targetData.topElastic = true;
             targetData.top = -1;
         }
 
-        targetData.leftElastic   = targetData.left < 0;
+        targetData.leftElastic   = targetData.left < 0 && targetData.scrollableX;
         if(Sticky.get("overscroll").left) {
             targetData.leftElastic = true;
             targetData.left = -1;
         }
 
-        targetData.rightElastic  = targetData.right < 0;
+        targetData.rightElastic  = targetData.right < 0 && targetData.scrollableX;
         if(Sticky.get("overscroll").right) {
             targetData.rightElastic = true;
             targetData.right = -1;
@@ -488,47 +499,62 @@ $.fn.serializeObject = function () {
 
         // Timing information
         if (targetData.time0 === undefined || !targetData.elastic || targetData.first) {
+            previousData[target].time0 = {};
+            previousData[target].time  = {};
             targetData.time0 = {};
             targetData.time  = {};
         }
 
         if(!targetData.topElastic   ) {
+            previousData[target].time0.top    = null;
+            previousData[target].time .top    = null;
             targetData.time0.top    = null;
             targetData.time .top    = null;
         }
 
         if(!targetData.bottomElastic) {
+            previousData[target].time0.bottom = null;
+            previousData[target].time .bottom = null;
             targetData.time0.bottom = null;
             targetData.time .bottom = null;
         }
 
         if(!targetData.leftElastic  ) {
+            previousData[target].time0.left   = null;
+            previousData[target].time .left   = null;
             targetData.time0.left   = null;
             targetData.time .left   = null;
         }
 
         if(!targetData.rightElastic ) {
+            previousData[target].time0.right  = null;
+            previousData[target].time .right  = null;
             targetData.time0.right  = null;
             targetData.time .right  = null;
         }
 
-        if(targetData.topElastic   ) targetData.time0.top    = targetData.time0.top    || new Date().getTime();
-        if(targetData.bottomElastic) targetData.time0.bottom = targetData.time0.bottom || new Date().getTime();
-        if(targetData.leftElastic  ) targetData.time0.left   = targetData.time0.left   || new Date().getTime();
-        if(targetData.rightElastic ) targetData.time0.right  = targetData.time0.right  || new Date().getTime();
+        if(targetData.topElastic   ) previousData[target].time0.top    = previousData[target].time0.top    ?? new Date().getTime();
+        if(targetData.bottomElastic) previousData[target].time0.bottom = previousData[target].time0.bottom ?? new Date().getTime();
+        if(targetData.leftElastic  ) previousData[target].time0.left   = previousData[target].time0.left   ?? new Date().getTime();
+        if(targetData.rightElastic ) previousData[target].time0.right  = previousData[target].time0.right  ?? new Date().getTime();
+
+        if(targetData.topElastic   ) targetData.time0.top    = previousData[target].time0.top   ;
+        if(targetData.bottomElastic) targetData.time0.bottom = previousData[target].time0.bottom;
+        if(targetData.leftElastic  ) targetData.time0.left   = previousData[target].time0.left  ;
+        if(targetData.rightElastic ) targetData.time0.right  = previousData[target].time0.right ;
 
         if(targetData.topElastic   ) targetData.time.top     = new Date().getTime();
         if(targetData.bottomElastic) targetData.time.bottom  = new Date().getTime();
         if(targetData.leftElastic  ) targetData.time.left    = new Date().getTime();
         if(targetData.rightElastic ) targetData.time.right   = new Date().getTime();
 
-        var dX = targetData.left  - left;
-        var dY = targetData.top - top;
+        var dX = targetData.scrollableX ? targetData.left - left : 0;
+        var dY = targetData.scrollableY ? targetData.top  - top  : 0;
         var dT = {
-            top:    Math.abs(targetData.time0.top - targetData.time.top),
-            bottom: Math.abs(targetData.time0.bottom - targetData.time.bottom),
-            left:   Math.abs(targetData.time0.left - targetData.time.left),
-            right:  Math.abs(targetData.time0.right - targetData.time.right)
+            top:    Math.abs(targetData.time.top    - targetData.time0.top   ),
+            bottom: Math.abs(targetData.time.bottom - targetData.time0.bottom),
+            left:   Math.abs(targetData.time.left   - targetData.time0.left  ),
+            right:  Math.abs(targetData.time.right  - targetData.time0.right )
         };
 
         // Event summary information
@@ -561,6 +587,8 @@ $.fn.serializeObject = function () {
 
         event.scrollX = {
             "delta"        : dX,
+            "percent"      : Math.round(100 * target.scrollLeft / (target.scrollWidth-target.clientWidth)),
+            "direction"    : targetData.scrollableX ? (dX > 0 ? "right" : (dX < 0 ? "left" : undefined)) : undefined,
             "left"         : targetData.left,
             "leftCounter"  : targetData.leftCounter,
             "leftElastic"  : targetData.leftElastic,
@@ -571,6 +599,8 @@ $.fn.serializeObject = function () {
 
         event.scrollY = {
             "delta"         : dY,
+            "percent"       : Math.round(100 * target.scrollTop / (target.scrollHeight-target.clientHeight)),
+            "direction"     : targetData.scrollableY ? dY > 0 ? "down" : (dY < 0 ? "up" : undefined) : undefined,
             "top"           : targetData.top,
             "topCounter"    : targetData.topCounter,
             "topElastic"    : targetData.topElastic,
@@ -785,9 +815,9 @@ $.fn.serializeObject = function () {
         // modern Chrome requires { passive: false } when adding event
         var supportsPassive = false;
         try {
-        window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
-            get: function () { supportsPassive = true; }
-        }));
+            window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
+                get: function () { supportsPassive = true; }
+            }));
         } catch(e) {}
 
         var wheelOpt = supportsPassive ? { passive: false } : false;
@@ -817,9 +847,9 @@ $.fn.serializeObject = function () {
         // modern Chrome requires { passive: false } when adding event
         var supportsPassive = false;
         try {
-        window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
-            get: function () { supportsPassive = true; }
-        }));
+            window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
+                get: function () { supportsPassive = true; }
+            }));
         } catch(e) {}
 
         var wheelOpt = supportsPassive ? { passive: false } : false;
@@ -842,6 +872,64 @@ $.fn.serializeObject = function () {
         return current < magnets.length-1 ? magnets[current+1] : magnets[current];
     }
 
+    var trigger = {};
+    Sticky.onScrollPercent = function(e)
+    {
+        if(e.target == undefined) return;
+
+        var classList = e.target[0].classList || "";
+            classList.forEach(function(className) {
+
+                if(!(e.target[0] in trigger)) trigger[e.target[0]] = {};
+
+                var regex = /scrollpercent(?:-(from|every|once)){0,1}-(\d+)(udlr){0,1}/gi;
+                if( (match = regex.exec(className)) ) {
+
+                    var scrollTrigger = match[1] || "every";
+
+                    var scrollDir = match[3] || "d";
+                    if(scrollDir == "u") scrollDir = "up";
+                    if(scrollDir == "d") scrollDir = "down";
+                    if(scrollDir == "l") scrollDir = "left";
+                    if(scrollDir == "r") scrollDir = "right";
+
+                    var scrollPercent = parseInt(match[2]);
+                    if(scrollDir == "up" || scrollDir == "left") scrollPercent = 100-scrollPercent;
+
+                    if(e.scrollX.direction !== undefined && e.scrollX.delta) {
+
+                        if(!(className in trigger[e.target[0]])) trigger[e.target[0]][className] = true;
+                        if(scrollTrigger == "from" && e.scrollX.percent >= scrollPercent)
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDir, percent:scrollPercent}}));
+                        if(scrollTrigger == "once" && e.scrollX.percent >= scrollPercent && trigger[e.target[0]][className])
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:1, dir:scrollDir, percent:scrollPercent}}));
+
+                        if(scrollTrigger == "every" && e.scrollX.percent <  scrollPercent  )
+                            trigger[e.target[0]][className] = true;
+                        if(scrollTrigger == "every" && e.scrollX.percent >= scrollPercent && trigger[e.target[0]][className])
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:2, dir:scrollDir, percent:scrollPercent}}));
+
+                        trigger[e.target[0]][className] = (scrollTrigger == "every" && e.scrollX.percent <  scrollPercent);
+                    }
+
+                    if(e.scrollY.direction !== undefined && e.scrollY.delta) {
+
+                        if(!className in trigger[e.target[0]]) trigger[e.target[0]][className] = true;
+                        if(scrollTrigger == "from" && e.scrollY.percent >= scrollPercent)
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:0, dir:scrollDir, percent:scrollPercent}}));
+                        if(scrollTrigger == "once" && e.scrollY.percent >= scrollPercent && trigger[e.target[0]][className])
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:1, dir:scrollDir, percent:scrollPercent}}));
+
+                        if(scrollTrigger == "every" && e.scrollY.percent >= scrollPercent && trigger[e.target[0]][className])
+                            e.target[0].dispatchEvent(new CustomEvent("scrollpercent", {detail: {scroll:e, trigger:2, dir:scrollDir, percent:scrollPercent}}));
+
+                        trigger[e.target[0]][className] = (scrollTrigger == "every" && e.scrollY.percent <  scrollPercent);
+                    }
+                }
+
+            }.bind(e.target[0]));
+    }
+
     var lastScrollTop = window.pageYOffset;
     var scrollSnapDebounce = false;
     Sticky.onScrollSnap = function (e)
@@ -894,14 +982,14 @@ $.fn.serializeObject = function () {
                 duration: Settings["smoothscroll_duration"],
                 speed: Settings["smoothscroll_speed"]
 
-                }, Sticky.debounce(function() {
+            }, Sticky.debounce(function() {
 
-                        scrollSnapDebounce = false;
-                        $(scroller).removeClass("sticky-prevent-scroll");
-                        if (Sticky.get("scrolllock"))
-                            Sticky.enableScroll();
+                scrollSnapDebounce = false;
+                $(scroller).removeClass("sticky-prevent-scroll");
+                if (Sticky.get("scrolllock"))
+                    Sticky.enableScroll();
 
-                }, 1000*Sticky.parseDuration(Sticky.get("debounce"))), scroller);
+            }, 1000*Sticky.parseDuration(Sticky.get("debounce"))), scroller);
 
             $(magnets).each((e) => $(magnets[e].element).removeClass("magnet closest"));
             $(magnet.element).addClass("magnet");
@@ -945,6 +1033,7 @@ $.fn.serializeObject = function () {
             });
     }
 
+    var first = true;
     var hasReset = false;
     Sticky.onScrollDelta = function (e) {
 
@@ -1021,6 +1110,11 @@ $.fn.serializeObject = function () {
 
                     if(Sticky.userScroll(el) || $(el).hasClass("sticky-magnet") || (hash == null && elAll.length == 0)) {
 
+                        if(first) {
+                            first = false;
+                            return;
+                        }
+
                         window.replaceHash(hash, false, false);
                         dispatchEvent(new HashChangeEvent("hashchange"))
                     }
@@ -1035,7 +1129,7 @@ $.fn.serializeObject = function () {
         $(e.target).find(".sticky-top").each(function() {
 
             var scrollhide = $(this).attr("aria-scrollhide") || Sticky.get("scrollhide");
-                scrollhide = scrollhide === "false" ? false : scrollhide;
+            scrollhide = scrollhide === "false" ? false : scrollhide;
 
             var that = this;
             if(scrollhide) {
@@ -1063,7 +1157,7 @@ $.fn.serializeObject = function () {
                     } else if(e.scrollY.delta > 0){
 
                         var borderThickness = parseInt($(this).css("border-bottom-width"))
-                                            + parseInt($(this).css("border-top-width"));
+                            + parseInt($(this).css("border-top-width"));
 
                         $(this).removeClass("show");
                         $(this).css("top", -this.clientHeight-borderThickness);
@@ -1091,12 +1185,12 @@ $.fn.serializeObject = function () {
                 if(style["position"] !== "fixed" && !scrollcatchClone) {
 
                     var scrollcatch = $(this).attr("aria-scrollcatch") || Sticky.get("scrollcatch");
-                        scrollcatch = scrollcatch === true ? style["z-index"] : scrollcatch;
+                    scrollcatch = scrollcatch === true ? style["z-index"] : scrollcatch;
 
-                        if (scrollcatch !== false && this.offsetTop <= scroller.scrollTop) {
+                    if (scrollcatch !== false && this.offsetTop <= scroller.scrollTop) {
 
                         var that = $(this).clone().removeAttr("id")
-                                        .attr("aria-scrollcatch-clone", true);
+                            .attr("aria-scrollcatch-clone", true);
 
                         $(this).addClass("caught")
                             .attr("aria-scrollcatch-pos", scroller.scrollTop+1)
@@ -1126,7 +1220,7 @@ $.fn.serializeObject = function () {
             if(e.reset) hasReset = true;
             if(scrollHint) {
 
-                if(e.scrollY.delta < 0) {
+                if(!e.scrollY.bottomElastic) {
                     $(this).removeClass("hint");
                     $(this).off("click.hint");
                     hasReset = false;
@@ -1186,7 +1280,7 @@ $.fn.serializeObject = function () {
 
             var firstChild = this.firstElementChild;
             var offsetTop  = Math.max(parseInt($(this).css("margin-top")), parseInt($(firstChild).css("margin-top")));
-                offsetTop += extraOffsetTop;
+            offsetTop += extraOffsetTop;
 
             $(this).css("top", offsetTop);
             $(this).css("margin-top", offsetTop - extraOffsetTop);
@@ -1194,7 +1288,7 @@ $.fn.serializeObject = function () {
 
             var lastChild = this.lastElementChild;
             var offsetBottom  = Math.max(parseInt($(this).css("margin-bottom")), parseInt($(lastChild).css("margin-bottom")));
-                offsetBottom -= extraOffsetBottom;
+            offsetBottom -= extraOffsetBottom;
 
             if(firstChild !== lastChild) {
 
@@ -1220,8 +1314,8 @@ $.fn.serializeObject = function () {
                 if (opacityIndex < 0) opacityIndex = transitionProperty.indexOf("all");
 
                 var opacityIndex    = (opacityIndex < 0 ? transitionDuration.length : opacityIndex);
-                    opacityDuration = (opacityIndex < 0 ? 0 : Sticky.parseDuration(transitionDuration[opacityIndex]));
-                    opacityDelay    = (opacityIndex < 0 ? 0 : Sticky.parseDuration(transitionDelay[opacityIndex]));
+                opacityDuration = (opacityIndex < 0 ? 0 : Sticky.parseDuration(transitionDuration[opacityIndex]));
+                opacityDelay    = (opacityIndex < 0 ? 0 : Sticky.parseDuration(transitionDelay[opacityIndex]));
 
                 transitionDuration[opacityIndex] = (extraEaseTime  < 0 ? opacityDuration : extraEaseTime);
                 transitionDelay   [opacityIndex] = (extraEaseDelay < 0 ? opacityDelay    : extraEaseDelay) + i*Sticky.parseDuration(Sticky.get("easethrottle"));
@@ -1229,8 +1323,8 @@ $.fn.serializeObject = function () {
                 var transition = [];
                 for (var i = 0; i < transitionProperty.length; i++)
                     transition[i] = transitionProperty[i] + " " +
-                                    Sticky.parseDuration(transitionDuration[i])+"s "+
-                                    Sticky.parseDuration(transitionDelay[i])+"s";
+                        Sticky.parseDuration(transitionDuration[i])+"s "+
+                        Sticky.parseDuration(transitionDelay[i])+"s";
 
                 $(this).css("transition", transition.join(","));
             }
@@ -1283,9 +1377,9 @@ $.fn.serializeObject = function () {
                 var isBelow   = bottom + extraEaseIn < 0;
                 var isBetween = isBiggerThanViewport
                     ? !isAbove && (top    + this.clientHeight + extraEaseIn > 0) &&
-                      !isBelow && (bottom - this.clientHeight - extraEaseIn < 0)
+                    !isBelow && (bottom - this.clientHeight - extraEaseIn < 0)
                     : !isAbove && (top    + this.clientHeight + extraEaseIn < 0) &&
-                      !isBelow && (bottom - this.clientHeight - extraEaseIn > 0);
+                    !isBelow && (bottom - this.clientHeight - extraEaseIn > 0);
 
                 if(Settings.debug) console.log(show,"Sticky ease-in:",isAbove,isBelow,isBetween);
                 show = (!isAbove && !isBelow);
@@ -1298,9 +1392,9 @@ $.fn.serializeObject = function () {
                 var isBelow   = bottom + extraEaseOut < 0;
                 var isBetween = isBiggerThanViewport
                     ? !isAbove && (top    + this.clientHeight + extraEaseOut > 0) &&
-                      !isBelow && (bottom - this.clientHeight - extraEaseOut < 0)
+                    !isBelow && (bottom - this.clientHeight - extraEaseOut < 0)
                     : !isAbove && (top    + this.clientHeight + extraEaseOut < 0) &&
-                      !isBelow && (bottom - this.clientHeight - extraEaseOut > 0);
+                    !isBelow && (bottom - this.clientHeight - extraEaseOut > 0);
 
                 if(Settings.debug) console.log(show,"Sticky ease-out:",isAbove,isBelow,isBetween);
                 show = !isAbove && !isBelow;
@@ -1321,10 +1415,10 @@ $.fn.serializeObject = function () {
 
         // Overscroll detection
         var overscroll = {top:false, right:false, bottom:false, left:false};
-            overscroll.top    = Sticky.overscrollTop(e);
-            overscroll.bottom = Sticky.overscrollBottom(e);
-            overscroll.left   = Sticky.overscrollLeft(e);
-            overscroll.right  = Sticky.overscrollRight(e);
+        overscroll.top    = Sticky.overscrollTop(e);
+        overscroll.bottom = Sticky.overscrollBottom(e);
+        overscroll.left   = Sticky.overscrollLeft(e);
+        overscroll.right  = Sticky.overscrollRight(e);
 
         Sticky.set("overscroll", overscroll);
         if(overscroll.top || overscroll.bottom || overscroll.left || overscroll.right)
@@ -1333,8 +1427,16 @@ $.fn.serializeObject = function () {
         return this;
     }
 
+
     Sticky.onAutoscroll = function() {
 
+        var container = this;
+        var scroller = $(container); //.closestScrollable();
+
+        function parseBoolean(str) {
+            return /true/i.test(str);
+        }
+
         if ($(this).data("autoscroll-prevent")) {
 
             $(this).closestScrollableWindow().off("scrolldelta.autoscroll");
@@ -1359,8 +1461,11 @@ $.fn.serializeObject = function () {
 
         var autoscrollX = $(this).data("autoscroll-x");
         if(autoscrollX == undefined) autoscrollX = Sticky.get("autoscroll");
+        autoscrollX = parseBoolean(autoscrollX);
+
         var autoscrollY = $(this).data("autoscroll-y");
         if(autoscrollY == undefined) autoscrollY = Sticky.get("autoscroll");
+        autoscrollY = parseBoolean(autoscrollY);
 
         var thresholdMinX = $(this).data("autoscroll-minwidth");
         if(thresholdMinX == undefined) thresholdMinX = Sticky.get("autoscroll_minwidth");
@@ -1408,18 +1513,18 @@ $.fn.serializeObject = function () {
 
             Sticky.scrollTo(scrollOptions, function() {
 
-                if( !bouncing || $(this).data("autoscroll-prevent") ) return;
+                if( !bouncing || $(container).data("autoscroll-prevent") ) return;
 
-                $(this).prop("user-scroll", true);
+                $(scroller).prop("user-scroll", true);
                 Sticky.scrollTo(scrollBackOptions, function() {
 
-                    Sticky.onAutoscroll.call(this);
-                    if(reverse) $(this).removeData("autoscroll-reverse");
-                    else $(this).data("autoscroll-reverse", true);
+                    Sticky.onAutoscroll.call(container);
+                    if(reverse) $(container).removeData("autoscroll-reverse");
+                    else $(container).data("autoscroll-reverse", true);
 
-                }.bind(this), this)
+                }.bind(this), scroller)
 
-            }.bind(this), this);
+            }.bind(this), scroller);
 
             return this;
 
@@ -1447,7 +1552,7 @@ $.fn.serializeObject = function () {
 
             var split = this.href.split("#");
             var anchorElem = $(split[1] == "" ? "body" : "#"+split[1]);
-                anchorY = anchorElem.length ? anchorElem[0].offsetTop - Sticky.getScrollPadding().top : 0;
+            anchorY = anchorElem.length ? anchorElem[0].offsetTop - Sticky.getScrollPadding().top : 0;
         });
 
         if(Sticky.get("swipehint"))
@@ -1455,10 +1560,10 @@ $.fn.serializeObject = function () {
             $(".sticky-swipehint-container").each(function() {
 
                 var image = document.createElement("img");
-                    image.src = $(this).data("image");
+                image.src = $(this).data("image");
 
                 var span = document.createElement("span");
-                    span.append(image);
+                span.append(image);
 
                 $(this).append(span);
             });
@@ -1493,113 +1598,124 @@ $.fn.serializeObject = function () {
             $(el).on('scrolldelta.sticky.snap', Sticky.onScrollSnap);
         }
 
+        // Sticky percent scroll
+        if(Sticky.get("scrollpercent"))
+        {
+            $(el).on('scrolldelta.sticky.percent', Sticky.onScrollPercent);
+        }
+
         // Sticky autoscroll
         if(Sticky.get("autoscroll"))
 
             $(".sticky-autoscroll").each(function() {
 
-                var scroller = $(this).closestScrollable();
+                    var container = this;
+                    var scroller = $(container); //.closestScrollable();
 
-                var reverseDelay = $(scroller).data("autoscroll-delay-reverse");
-                if (reverseDelay == undefined) reverseDelay = Sticky.get("autoscroll_delay_reverse");
-                var reverseSpeed = $(scroller).data("autoscroll-speed-reverse");
-                if (reverseSpeed == undefined) reverseSpeed = Sticky.get("autoscroll_speed_reverse");
-                var reverseDuration = $(scroller).data("autoscroll-duration-reverse");
-                if (reverseDuration == undefined) reverseDuration = Sticky.get("autoscroll_duration_reverse");
+                    var reverseDelay = $(scroller).data("autoscroll-delay-reverse");
+                    if (reverseDelay == undefined) reverseDelay = Sticky.get("autoscroll_delay_reverse");
+                    var reverseSpeed = $(scroller).data("autoscroll-speed-reverse");
+                    if (reverseSpeed == undefined) reverseSpeed = Sticky.get("autoscroll_speed_reverse");
+                    var reverseDuration = $(scroller).data("autoscroll-duration-reverse");
+                    if (reverseDuration == undefined) reverseDuration = Sticky.get("autoscroll_duration_reverse");
 
-                var startOver = $(scroller).data("autoscroll-startover");
-                if (startOver == undefined) startOver = Sticky.get("autoscroll_startover");
+                    var startOver = $(scroller).data("autoscroll-startover");
+                    if (startOver == undefined) startOver = Sticky.get("autoscroll_startover");
 
-                var delay = $(scroller).data("autoscroll-delay");
-                if (delay == undefined) delay = Sticky.get("autoscroll_delay");
+                    var delay = $(scroller).data("autoscroll-delay");
+                    if (delay == undefined) delay = Sticky.get("autoscroll_delay");
 
-                var thresholdMinX = $(scroller).data("autoscroll-minwidth");
-                if(thresholdMinX == undefined) thresholdMinX = Sticky.get("autoscroll_minwidth");
-                var thresholdMinY = $(scroller).data("autoscroll-minheight");
-                if(thresholdMinY == undefined) thresholdMinY = Sticky.get("autoscroll_minheight");
+                    var thresholdMinX = $(scroller).data("autoscroll-minwidth");
+                    if(thresholdMinX == undefined) thresholdMinX = Sticky.get("autoscroll_minwidth");
+                    var thresholdMinY = $(scroller).data("autoscroll-minheight");
+                    if(thresholdMinY == undefined) thresholdMinY = Sticky.get("autoscroll_minheight");
 
-                var scrollHeight = $(scroller).prop('scrollHeight') - $(scroller).innerHeight();
-                var atTop    = $(scroller).scrollTop() < 1;
-                var atBottom = Math.abs($(scroller).scrollTop() - scrollHeight) < 1;
+                    var scrollHeight = $(scroller).prop('scrollHeight') - $(scroller).innerHeight();
+                    var atTop    = $(scroller).scrollTop() < 1;
+                    var atBottom = Math.abs($(scroller).scrollTop() - scrollHeight) < 1;
 
-                var scrollWidth = $(scroller).prop('scrollWidth') - $(scroller).innerWidth();
-                var atLeft  = $(scroller).scrollLeft() < 1;
-                var atRight = Math.abs($(scroller).scrollLeft() - scrollWidth) < 1;
+                    var scrollWidth = $(scroller).prop('scrollWidth') - $(scroller).innerWidth();
+                    var atLeft  = $(scroller).scrollLeft() < 1;
+                    var atRight = Math.abs($(scroller).scrollLeft() - scrollWidth) < 1;
 
-                var mouseAction = $(scroller).data("autoscroll-mouse-action");
-                if (mouseAction == undefined) mouseAction = Sticky.get("autoscroll_mouse_action");
+                    var mouseAction = $(scroller).data("autoscroll-mouse-action");
+                    if (mouseAction == undefined) mouseAction = Sticky.get("autoscroll_mouse_action");
 
-                var noScrollY = (atTop && atBottom) || scrollHeight < thresholdMinY;
-                var noScrollX = (atLeft && atRight) || scrollWidth  < thresholdMinX;
+                    var noScrollY = (atTop && atBottom) || scrollHeight < thresholdMinY;
+                    var noScrollX = (atLeft && atRight) || scrollWidth  < thresholdMinX;
 
-                $(scroller).data("autoscroll-prevent", false);
+                    $(scroller).data("autoscroll-prevent", false);
 
-                var autoscrollTimeout = undefined;
-                var payloadAutoscroll = function() {
+                    var autoscrollTimeout = undefined;
+                    var payloadAutoscroll = function() {
 
-                    if(autoscrollTimeout != undefined) clearTimeout(autoscrollTimeout);
-                    autoscrollTimeout = setTimeout(() => Sticky.onAutoscroll.call(scroller), 1000*Sticky.parseDuration(delay) + 1);
-                };
+                        if(autoscrollTimeout != undefined) clearTimeout(autoscrollTimeout);
+                        autoscrollTimeout = setTimeout(() => Sticky.onAutoscroll.call(container), 1000*Sticky.parseDuration(delay) + 1);
+                    };
 
-                //
-                // Mouse events
-                if (mouseAction) {
+                    //
+                    // Mouse events
+                    if (mouseAction) {
 
-                    $(scroller).on("mouseenter.autoscroll touchstart.autoscroll", function() {
+                        $(scroller).off("mouseenter.autoscroll touchstart.autoscroll");
+                        $(scroller).on("mouseenter.autoscroll touchstart.autoscroll", function() {
 
-                        if(autoscrollTimeout != undefined) clearTimeout(autoscrollTimeout);
-                        $(scroller).prop("user-scroll", true);
-                        $(scroller).stop();
-                    });
+                            if(autoscrollTimeout != undefined) clearTimeout(autoscrollTimeout);
+                            $(scroller).prop("user-scroll", true);
+                            $(scroller).stop();
+                        });
 
-                    $(scroller).on("mouseleave.autoscroll touchend.autoscroll", function() {
+                        $(scroller).on("mouseleave.autoscroll touchend.autoscroll");
+                        $(scroller).on("mouseleave.autoscroll touchend.autoscroll", function() {
 
-                        if(startOver) payloadAutoscroll();
-                        else {
+                            if(startOver) payloadAutoscroll();
+                            else {
 
-                            $(scroller).data("autoscroll-prevent", "true");
-                            $(scroller).off("mouseleave.autoscroll touchend.autoscroll");
-                        }
-                    });
+                                $(scroller).data("autoscroll-prevent", "true");
+                                $(scroller).off("mouseleave.autoscroll touchend.autoscroll");
+                            }
+                        });
 
-                    $(scroller).on("onbeforeunload.autoscroll", function() {
+                        $(scroller).on("onbeforeunload.autoscroll");
+                        $(scroller).on("onbeforeunload.autoscroll", function() {
 
-                        $(this).off("mousewheel.autoscroll touchstart.autoscroll");
-                        $(this).off("mouseenter.autoscroll touchstart.autoscroll");
-                        $(this).off("mouseleave.autoscroll touchend.autoscroll");
-                        $(this).off("scroll.autoscroll");
-                        $(this).off("onbeforeunload.autoscroll");
+                            $(this).off("mousewheel.autoscroll touchstart.autoscroll");
+                            $(this).off("mouseenter.autoscroll touchstart.autoscroll");
+                            $(this).off("mouseleave.autoscroll touchend.autoscroll");
+                            $(this).off("scroll.autoscroll");
+                            $(this).off("onbeforeunload.autoscroll");
 
-                        var scrollerWindow = $(this).closestScrollableWindow();
-                        $(scrollerWindow).off("scroll.autoscroll");
-                    });
-                }
+                            var scrollerWindow = $(this).closestScrollableWindow();
+                            $(scrollerWindow).off("scroll.autoscroll");
+                        });
+                    }
 
-                //
-                // Call action
-                if(noScrollY && noScrollX) payloadAutoscroll();
-                else if($(scroller).data("autoscroll-reverse")) {
+                    //
+                    // Call action
+                    if(noScrollY && noScrollX) payloadAutoscroll();
+                    else if($(scroller).data("autoscroll-reverse")) {
 
-                    var scrollWidth  = $(scroller).prop('scrollWidth')  - scroller.innerWidth();
-                    var scrollHeight = $(scroller).prop('scrollHeight') - scroller.innerHeight();
+                        var scrollWidth  = $(scroller).prop('scrollWidth')  - scroller.innerWidth();
+                        var scrollHeight = $(scroller).prop('scrollHeight') - scroller.innerHeight();
 
-                    $(scroller).on("wheel.autoscroll DOMMouseScroll.autoscroll mousewheel.autoscroll touchstart.autoscroll", function(e) {
+                        $(scroller).off("wheel.autoscroll DOMMouseScroll.autoscroll mousewheel.autoscroll touchstart.autoscroll");
+                        $(scroller).on("wheel.autoscroll DOMMouseScroll.autoscroll mousewheel.autoscroll touchstart.autoscroll", function(e) {
 
-                        $(this).prop("user-scroll", true);
-                        $(this).stop();
-                    });
+                            $(this).prop("user-scroll", true);
+                            $(this).stop();
+                        });
 
-                    if (Settings.debug) console.log("Autoscroll reverse delay applied is \"" + reverseDelay + "\".");
-                    setTimeout(() => Sticky.scrollTo({
+                        if (Settings.debug) console.log("Autoscroll reverse delay applied is \"" + reverseDelay + "\".");
+                        setTimeout(() => Sticky.scrollTo({
                             left:scrollWidth,
                             top:scrollHeight,
                             duration:reverseDuration,
                             speed:reverseSpeed
-                    }, payloadAutoscroll, scroller), 1000*Sticky.parseDuration(reverseDelay + 1));
+                        }, payloadAutoscroll, scroller), 1000*Sticky.parseDuration(reverseDelay + 1));
 
-                } else payloadAutoscroll();
-            }
-        );
+                    } else payloadAutoscroll();
+                }
+            );
 
         Settings.ready = true;