Merge pull request #6 from mikestreety/master

Add class, width and page load
AndrewHenderson · Nov 27, 2016 · 3292010 · 3292010
2 parents c405876 + 009401f
commit 3292010
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 34 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/README.md b/README.md
@@ -14,6 +14,7 @@ $('#foo').sticky({
 	topSpacing: 80, // Space between element and top of the viewport
 	zIndex: 100, // z-index
 	stopper: "#bar" // Id, class, or number value
+	stickyClass: false // Class applied to element when it's stuck
 });
 ```
 Note: If no stopper id or class is provided, the default is 'sticky-stopper'. You can also use number values for pixel points on the y-axis.

diff --git a/jquery.jsticky.js b/jquery.jsticky.js
@@ -1,8 +1,9 @@
 /* jSticky Plugin
  * =============
  * Author: Andrew Henderson (@AndrewHenderson)
+ * Contributor: Mike Street (@mikestreety)
  * Date: 9/7/2012
- * Update: 02/14/2013
+ * Update: 09/20/2016
  * Website: http://github.com/andrewhenderson/jsticky/
  * Description: A jQuery plugin that keeps select DOM
  * element(s) in view while scrolling the page.
@@ -11,29 +12,28 @@
 ;(function($) {
 
   $.fn.sticky = function(options) {
-
     var defaults = {
-        topSpacing: 0, // No spacing by default
-        zIndex: '', // No default z-index
-        stopper: '.sticky-stopper' // Default stopper class, also accepts number value
-      },
-      settings = $.extend({}, defaults, options); // Accepts custom stopper id or class
+      topSpacing: 0, // No spacing by default
+      zIndex: '', // No default z-index
+      stopper: '.sticky-stopper', // Default stopper class, also accepts number value
+      stickyClass: false // Class applied to element when it's stuck
+    };
+    var settings = $.extend({}, defaults, options); // Accepts custom stopper id or class
 
     // Checks if custom z-index was defined
     function checkIndex() {
-
       if (typeof settings.zIndex == 'number') {
         return true;
       } else {
         return false;
       }
     }
+
     var hasIndex = checkIndex(); // True or false
 
     // Checks if a stopper exists in the DOM or number defined
     function checkStopper() {
-
-      if ( 0 < $(settings.stopper).length || typeof settings.stopper === 'number' ) {
+      if (0 < $(settings.stopper).length || typeof settings.stopper === 'number') {
         return true;
       } else {
         return false;
@@ -43,56 +43,75 @@
 
     return this.each(function() {
 
-      var $this          = $(this),
-          thisHeight     = $this.outerHeight(),
-          thisWidth      = $this.outerWidth(),
-          topSpacing     = settings.topSpacing,
-          zIndex         = settings.zIndex,
-          pushPoint      = $this.offset().top - topSpacing, // Point at which the sticky element starts pushing
-          placeholder    = $('<div></div>').width(thisWidth).height(thisHeight).addClass('sticky-placeholder'), // Cache a clone sticky element
-          stopper        = settings.stopper,
-          $window        = $(window);
+      var $this = $(this);
+      var thisHeight = $this.outerHeight();
+      var thisWidth = $this.outerWidth();
+      var topSpacing = settings.topSpacing;
+      var zIndex = settings.zIndex;
+      var pushPoint = $this.offset().top - topSpacing; // Point at which the sticky element starts pushing
+      var placeholder = $('<div></div>').width(thisWidth).height(thisHeight).addClass('sticky-placeholder'); // Cache a clone sticky element
+      var stopper = settings.stopper;
+      var $window = $(window);
 
       function stickyScroll() {
 
         var windowTop  = $window.scrollTop(); // Check window's scroll position
-
+        var stopPoint = stopper;
+        var parentWidth = $this.parent().width();
+
+        placeholder.width(parentWidth)
+
         if ( hasStopper && typeof stopper === 'string' ) {
-          var stopperTop = $(stopper).offset().top,
-              stopPoint  = (stopperTop - thisHeight) - topSpacing;
-        } else if (hasStopper && typeof stopper === 'number') {
-          var stopPoint = stopper;
+          var stopperTop = $(stopper).offset().top;
+          stopPoint  = (stopperTop - thisHeight) - topSpacing;
         }
 
         if (pushPoint < windowTop) {
           // Create a placeholder for sticky element to occupy vertical real estate
+          if(settings.stickyClass)
+            $this.addClass(settings.stickyClass);
+
           $this.after(placeholder).css({
             position: 'fixed',
-            top: topSpacing
+            top: topSpacing,
+            width: parentWidth
           });
-          
+
           if (hasIndex) {
-            $this.css({ zIndex: zIndex });
+            $this.css({
+              zIndex: zIndex
+            });
           }
 
           if (hasStopper) {
             if (stopPoint < windowTop) {
               var diff = (stopPoint - windowTop) + topSpacing;
-              $this.css({ top: diff });
+              $this.css({
+                top: diff
+              });
             }
           }
         } else {
+          if(settings.stickyClass)
+            $this.removeClass(settings.stickyClass);
+
           $this.css({
             position: 'static',
             top: null,
-            left: null
+            left: null,
+            width: 'auto'
           });
 
           placeholder.remove();
         }
-      };
+      }
+
+      if($window.innerHeight() > thisHeight) {
 
-      $window.bind("scroll", stickyScroll);
+        $window.bind('scroll', stickyScroll);
+        $window.bind('load', stickyScroll);
+        $window.bind('resize', stickyScroll);
+      }
     });
   };
-})(jQuery);
+})(jQuery);
diff --git a/jquery.jsticky.min.js b/jquery.jsticky.min.js
@@ -1,10 +1,11 @@
 /* jSticky Plugin
  * =============
  * Author: Andrew Henderson (@AndrewHenderson)
+ * Contributor: Mike Street (@mikestreety)
  * Date: 9/7/2012
- * Update: 11/4/2012
+ * Update: 09/20/2016
  * Website: http://github.com/andrewhenderson/jsticky/
  * Description: A jQuery plugin that keeps select DOM element(s)
  * in view while scrolling the page.
  */
-;(function(e){e.fn.sticky=function(t){function i(){return typeof r.zIndex=="number"?!0:!1}function o(){return 0<e(r.stopper).length||typeof r.stopper=="number"?!0:!1}var n={topSpacing:0,zIndex:"",stopper:".sticky-stopper"},r=e.extend({},n,t),s=i(),u=o();return this.each(function(){function h(){var r=c.scrollTop();if(u&&typeof l=="string")var h=e(l).offset().top,p=h-n-i;else if(u&&typeof l=="number")var p=l;if(a<r){t.after(f).css({position:"fixed",top:i}),s&&t.css({zIndex:o});if(u&&p<r){var d=p-r+i;t.css({top:d})}}else t.css({position:"static",top:""}),f.remove()}var t=e(this),n=t.outerHeight(),i=r.topSpacing,o=r.zIndex,a=t.offset().top-i,f=t.clone().css("visibility","hidden").addClass("sticky-placeholder"),l=r.stopper,c=e(window);c.bind("scroll",h)})}})(jQuery)
+!function(t){t.fn.sticky=function(s){function i(){return"number"==typeof o.zIndex?!0:!1}function e(){return 0<t(o.stopper).length||"number"==typeof o.stopper?!0:!1}var n={topSpacing:0,zIndex:"",stopper:".sticky-stopper",stickyClass:!1},o=t.extend({},n,s),r=i(),p=e();return this.each(function(){function s(){var s=u.scrollTop(),n=f,h=i.parent().width();if(l.width(h),p&&"string"==typeof f){var y=t(f).offset().top;n=y-e-c}if(s>d){if(o.stickyClass&&i.addClass(o.stickyClass),i.after(l).css({position:"fixed",top:c,width:h}),r&&i.css({zIndex:a}),p&&s>n){var v=n-s+c;i.css({top:v})}}else o.stickyClass&&i.removeClass(o.stickyClass),i.css({position:"static",top:null,left:null,width:"auto"}),l.remove()}var i=t(this),e=i.outerHeight(),n=i.outerWidth(),c=o.topSpacing,a=o.zIndex,d=i.offset().top-c,l=t("<div></div>").width(n).height(e).addClass("sticky-placeholder"),f=o.stopper,u=t(window);u.innerHeight()>e&&(u.bind("scroll",s),u.bind("load",s),u.bind("resize",s))})}}(jQuery);