relatively-sticky

A jQuery plugin for creating smart sticky elements
git clone https://git.ce9e.org/relatively-sticky.git

commit
809cae990e8d462db4c0a0ddb0a8c12b2d57160a
parent
fa3fe3d9d9293dfd226b6094e91e14565ca4ba38
Author
leaf corcoran <leafot@gmail.com>
Date
2013-07-30 17:33
add some basic width remembering for non floated divs

Diffstat

M jquery.sticky-kit.coffee 11 +++++++++--
M jquery.sticky-kit.js 15 ++++++++++++---
M jquery.sticky-kit.min.js 7 ++++---
M test/index.html 7 ++++++-

4 files changed, 31 insertions, 9 deletions


diff --git a/jquery.sticky-kit.coffee b/jquery.sticky-kit.coffee

@@ -47,6 +47,7 @@ $.fn.stick_in_parent = (parent_selector, opts={}) ->
   47    47       bottomed = false
   48    48       last_pos = undefined
   49    49       offset = 0
   -1    50       reset_width = false
   50    51 
   51    52       win.on "scroll", (e) ->
   52    53         scroll = win.scrollTop()
@@ -75,9 +76,11 @@ $.fn.stick_in_parent = (parent_selector, opts={}) ->
   75    76               elm.insertAfter spacer
   76    77 
   77    78             spacer.detach()
   78    -1             elm.css({
   -1    79             css = {
   79    80               position: ""
   80    -1             }).removeClass(sticky_class).trigger("sticky_kit:unstick")
   -1    81             }
   -1    82             css.width = "" if reset_width
   -1    83             elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick")
   81    84 
   82    85           # updated offset
   83    86           if inner_scrolling
@@ -102,6 +105,10 @@ $.fn.stick_in_parent = (parent_selector, opts={}) ->
  102   105               top: offset
  103   106             }
  104   107 
   -1   108             if float == "none" && elm.css("display") == "block"
   -1   109               css.width = elm.width() + "px"
   -1   110               reset_width = true
   -1   111 
  105   112             elm.css(css).addClass(sticky_class).after(spacer)
  106   113 
  107   114             if float == "left" || float == "right"

diff --git a/jquery.sticky-kit.js b/jquery.sticky-kit.js

@@ -29,7 +29,7 @@
   29    29       sticky_class = "is_stuck";
   30    30     }
   31    31     _fn = function(elm, padding_bottom, parent_top, parent_height, height) {
   32    -1       var bottomed, fixed, float, last_pos, offset, parent, recalc, spacer;
   -1    32       var bottomed, fixed, float, last_pos, offset, parent, recalc, reset_width, spacer;
   33    33       parent = elm.parent();
   34    34       if (parent_selector != null) {
   35    35         parent = parent.closest(parent_selector);
@@ -59,6 +59,7 @@
   59    59       bottomed = false;
   60    60       last_pos = void 0;
   61    61       offset = 0;
   -1    62       reset_width = false;
   62    63       return win.on("scroll", function(e) {
   63    64         var before, css, delta, scroll, will_bottom, win_height;
   64    65         scroll = win.scrollTop();
@@ -83,9 +84,13 @@
   83    84               elm.insertAfter(spacer);
   84    85             }
   85    86             spacer.detach();
   86    -1             elm.css({
   -1    87             css = {
   87    88               position: ""
   88    -1             }).removeClass(sticky_class).trigger("sticky_kit:unstick");
   -1    89             };
   -1    90             if (reset_width) {
   -1    91               css.width = "";
   -1    92             }
   -1    93             elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
   89    94           }
   90    95           if (inner_scrolling) {
   91    96             win_height = win.height();
@@ -108,6 +113,10 @@
  108   113               position: "fixed",
  109   114               top: offset
  110   115             };
   -1   116             if (float === "none" && elm.css("display") === "block") {
   -1   117               css.width = elm.width() + "px";
   -1   118               reset_width = true;
   -1   119             }
  111   120             elm.css(css).addClass(sticky_class).after(spacer);
  112   121             if (float === "left" || float === "right") {
  113   122               spacer.append(elm);

diff --git a/jquery.sticky-kit.min.js b/jquery.sticky-kit.min.js

@@ -1,6 +1,7 @@
    1     1 /*
    2     2  WTFPL | Leaf Corcoran 2013 | http://leafo.net
    3     3 */
    4    -1 (function(){var c,t;c=this.jQuery;t=c(window);c.fn.stick_in_parent=function(e,g){var x,u,p,y,f,z;null==g&&(g={});c.isPlainObject(e)&&(g=e,e=void 0);p=g.sticky_class;u=g.inner_scrolling;null==u&&(u=!0);null==p&&(p="is_stuck");y=function(b,g,q,f,h){var m,r,n,v,a,d,w,s;d=b.parent();null!=e&&(d=d.closest(e));w=function(){var a,l;a=parseInt(d.css("border-top-width"),10);l=parseInt(d.css("padding-top"),10);g=parseInt(d.css("padding-bottom"));q=d.offset().top+a+l;f=d.height();return h=b.outerHeight(!0)};
    5    -1 w();if(h!==f)return d.on("sticky_kit:recalc",w),n=b.css("float"),s=c("<div />").css({width:b.outerWidth(!0),height:h,display:b.css("display"),"float":n}),m=r=!1,v=void 0,a=0,t.on("scroll",function(k){var l,c,e;k=t.scrollTop();null!=v&&(l=k-v);v=k;r?(c=k+h+a>f+q,m&&!c&&(m=!1,b.css({position:"fixed",bottom:"",top:0}).trigger("sticky_kit:unbottom")),k<q&&(r=!1,a=0,"left"!==n&&"right"!==n||b.insertAfter(s),s.detach(),b.css({position:""}).removeClass(p).trigger("sticky_kit:unstick")),u&&(e=t.height(),
    6    -1 h>e&&!m&&(a-=l,a=Math.max(e-h,a),a=Math.min(0,a),b.css({top:a+"px"})))):k>q&&(r=!0,l={position:"fixed",top:a},b.css(l).addClass(p).after(s),"left"!==n&&"right"!==n||s.append(b),b.trigger("sticky_kit:stick"));if(r&&(null==c&&(c=k+h+a>f+q),!m&&c))return m=!0,"static"===d.css("position")&&d.css({position:"relative"}),b.css({position:"absolute",bottom:g,top:""}).trigger("sticky_kit:bottom")})};f=0;for(z=this.length;f<z;f++)x=this[f],y(c(x));return this}}).call(this);
   -1     4 (function(){var f,t;f=this.jQuery;t=f(window);f.fn.stick_in_parent=function(d,h){var y,u,p,z,g,A;null==h&&(h={});f.isPlainObject(d)&&(h=d,d=void 0);p=h.sticky_class;u=h.inner_scrolling;null==u&&(u=!0);null==p&&(p="is_stuck");z=function(a,h,q,g,k){var n,r,l,v,b,e,w,x,s;e=a.parent();null!=d&&(e=e.closest(d));w=function(){var b,c;b=parseInt(e.css("border-top-width"),10);c=parseInt(e.css("padding-top"),10);h=parseInt(e.css("padding-bottom"));q=e.offset().top+b+c;g=e.height();return k=a.outerHeight(!0)};
   -1     5 w();if(k!==g)return e.on("sticky_kit:recalc",w),l=a.css("float"),s=f("<div />").css({width:a.outerWidth(!0),height:k,display:a.css("display"),"float":l}),n=r=!1,v=void 0,b=0,x=!1,t.on("scroll",function(m){var c,f,d;m=t.scrollTop();null!=v&&(f=m-v);v=m;r?(d=m+k+b>g+q,n&&!d&&(n=!1,a.css({position:"fixed",bottom:"",top:0}).trigger("sticky_kit:unbottom")),m<q&&(r=!1,b=0,"left"!==l&&"right"!==l||a.insertAfter(s),s.detach(),c={position:""},x&&(c.width=""),a.css(c).removeClass(p).trigger("sticky_kit:unstick")),
   -1     6 u&&(c=t.height(),k>c&&!n&&(b-=f,b=Math.max(c-k,b),b=Math.min(0,b),a.css({top:b+"px"})))):m>q&&(r=!0,c={position:"fixed",top:b},"none"===l&&"block"===a.css("display")&&(c.width=a.width()+"px",x=!0),a.css(c).addClass(p).after(s),"left"!==l&&"right"!==l||s.append(a),a.trigger("sticky_kit:stick"));if(r&&(null==d&&(d=m+k+b>g+q),!n&&d))return n=!0,"static"===e.css("position")&&e.css({position:"relative"}),a.css({position:"absolute",bottom:h,top:""}).trigger("sticky_kit:bottom")})};g=0;for(A=this.length;g<
   -1     7 A;g++)y=this[g],z(f(y));return this}}).call(this);

diff --git a/test/index.html b/test/index.html

@@ -59,7 +59,6 @@
   59    59 </head>
   60    60 <body>
   61    61 
   62    -1 
   63    62 <h1>Basic Stick</h1>
   64    63 <div class="container one">
   65    64   <div class="item"></div>
@@ -131,6 +130,12 @@
  131   130   <div class="item float full" style="margin: 10px"></div>
  132   131 </div>
  133   132 
   -1   133 <h1>Float & Div</h1>
   -1   134 <div class="container one clearfix borders">
   -1   135   <div class="item float full"></div>
   -1   136   <div class="item" style="display: block; margin-left: 210px;"></div>
   -1   137 </div>
   -1   138 
  134   139 <h1>No Stick</h1>
  135   140 <div class="container one">
  136   141   <div class="item full"></div>