MAGETWO-66300: [GitHub][PR] Stickyjs improvements #7139

Author: Oleksii Korshenko

lib/web/mage/sticky.js

@@ -11,7 +11,48 @@ define([
 
     $.widget('mage.sticky', {
         options: {
-            container: ''
+            /**
+             * Element selector, who's height will be used to restrict the
+             * maximum offsetTop position of the stuck element.
+             * Default uses document body.
+             * @type {String}
+             */
+            container: '',
+
+            /**
+             * Spacing in pixels above the stuck element
+             * @type {Number|Function} Number or Function that will return a Number
+             */
+            spacingTop: 0,
+
+            /**
+             * Allows postponing sticking, until element will go out of the
+             * screen for the number of pixels.
+             * @type {Number|Function} Number or Function that will return a Number
+             */
+            stickAfter: 0,
+
+            /**
+             * CSS class for active sticky state
+             * @type {String}
+             */
+            stickyClass: '_sticky'
+        },
+
+        /**
+         * Retrieve option value
+         * @param  {String} option
+         * @return {*}
+         * @private
+         */
+        _getOptionValue: function (option) {
+            var value = this.options[option] || 0;
+
+            if (typeof value === 'function') {
+                value = this.options[option]();
+            }
+
+            return value;
         },
 
         /**
@@ -35,14 +76,29 @@ define([
          */
         _stick: function () {
             var offset,
-                isStatic;
+                isStatic,
+                stuck,
+                stickAfter;
 
             isStatic = this.element.css('position') === 'static';
 
             if (!isStatic && this.element.is(':visible')) {
-                offset = $(document).scrollTop() - this.parentOffset;
+                offset = $(document).scrollTop() -
+                    this.parentOffset +
+                    this._getOptionValue('spacingTop');
+
                 offset = Math.max(0, Math.min(offset, this.maxOffset));
-                this.element.css('top', offset);
+
+                stuck = this.element.hasClass(this.options.stickyClass);
+                stickAfter = this._getOptionValue('stickAfter');
+
+                if (offset && !stuck && offset < stickAfter) {
+                    offset = 0;
+                }
+
+                this.element
+                    .toggleClass(this.options.stickyClass, offset > 0)
+                    .css('top', offset);
             }
         },