- commit
- 6884018dee20aa6e3c23f19bb23789482cb9f61e
- parent
- 16d5cef2367185bef38f5d24135769b807187924
- Author
- leaf corcoran <leafot@gmail.com>
- Date
- 2014-11-11 00:31
you can pass spacer to false to disable, fix #21
Diffstat
| M | jquery.sticky-kit.coffee | 6 | +++--- |
| M | jquery.sticky-kit.js | 22 | +++++++++++++--------- |
| M | jquery.sticky-kit.min.js | 10 | +++++----- |
| M | test/index.html | 10 | ++++++++++ |
4 files changed, 31 insertions, 17 deletions
diff --git a/jquery.sticky-kit.coffee b/jquery.sticky-kit.coffee
@@ -24,11 +24,11 @@ $.fn.stick_in_parent = (opts={}) ->
24 24 fixed = false
25 25 bottomed = false
26 26 spacer = if manual_spacer?
27 -1 elm.closest manual_spacer
-1 27 manual_spacer && elm.closest manual_spacer
28 28 else
29 29 $("<div />")
30 30
31 -1 spacer.css('position', elm.css('position'))
-1 31 spacer.css('position', elm.css('position')) if spacer
32 32
33 33 recalc = ->
34 34 border_top = parseInt parent.css("border-top-width"), 10
@@ -66,7 +66,7 @@ $.fn.stick_in_parent = (opts={}) ->
66 66 display: elm.css "display"
67 67 "vertical-align": elm.css "vertical-align"
68 68 "float": el_float
69 -1 })
-1 69 }) if spacer
70 70
71 71 if restore
72 72 tick()
diff --git a/jquery.sticky-kit.js b/jquery.sticky-kit.js
@@ -44,8 +44,10 @@ 44 44 } 45 45 fixed = false; 46 46 bottomed = false;47 -1 spacer = manual_spacer != null ? elm.closest(manual_spacer) : $("<div />");48 -1 spacer.css('position', elm.css('position'));-1 47 spacer = manual_spacer != null ? manual_spacer && elm.closest(manual_spacer) : $("<div />"); -1 48 if (spacer) { -1 49 spacer.css('position', elm.css('position')); -1 50 } 49 51 recalc = function() { 50 52 var border_top, padding_top, restore; 51 53 border_top = parseInt(parent.css("border-top-width"), 10); @@ -71,13 +73,15 @@ 71 73 top = elm.offset().top - parseInt(elm.css("margin-top"), 10) - offset_top; 72 74 height = elm.outerHeight(true); 73 75 el_float = elm.css("float");74 -1 spacer.css({75 -1 width: elm.outerWidth(true),76 -1 height: height,77 -1 display: elm.css("display"),78 -1 "vertical-align": elm.css("vertical-align"),79 -1 "float": el_float80 -1 });-1 76 if (spacer) { -1 77 spacer.css({ -1 78 width: elm.outerWidth(true), -1 79 height: height, -1 80 display: elm.css("display"), -1 81 "vertical-align": elm.css("vertical-align"), -1 82 "float": el_float -1 83 }); -1 84 } 81 85 if (restore) { 82 86 return tick(); 83 87 }
diff --git a/jquery.sticky-kit.min.js b/jquery.sticky-kit.min.js
@@ -1,8 +1,8 @@ 1 1 /* 2 2 Sticky-kit v1.0.5 | WTFPL | Leaf Corcoran 2014 | http://leafo.net 3 3 */4 -1 (function(){var k,d;k=this.jQuery||window.jQuery;d=k(window);k.fn.stick_in_parent=function(e){var w,q,r,g,s,C,n,D;null==e&&(e={});s=e.sticky_class;w=e.inner_scrolling;g=e.parent;r=e.offset_top;q=e.spacer;null==r&&(r=0);null==g&&(g=void 0);null==w&&(w=!0);null==s&&(s="is_stuck");C=function(a,e,n,x,z,t,p){var u,A,m,y,c,f,B,v,h,b;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);f=a.parent();null!=g&&(f=f.closest(g));if(!f.length)throw"failed to find stick parent";u=m=!1;h=null!=q?a.closest(q):k("<div />");5 -1 h.css("position",a.css("position"));B=function(){var c,d,l;c=parseInt(f.css("border-top-width"),10);d=parseInt(f.css("padding-top"),10);e=parseInt(f.css("padding-bottom"),10);n=f.offset().top+c+d;x=f.height();m&&(u=m=!1,null==q&&(a.insertAfter(h),h.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(s),l=!0);z=a.offset().top-parseInt(a.css("margin-top"),10)-r;t=a.outerHeight(!0);p=a.css("float");h.css({width:a.outerWidth(!0),height:t,display:a.css("display"),"vertical-align":a.css("vertical-align"),6 -1 "float":p});if(l)return b()};B();if(t!==x)return y=void 0,c=r,b=function(){var b,k,l,g;l=d.scrollTop();null!=y&&(k=l-y);y=l;m?(g=l+t+c>x+n,u&&!g&&(u=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom")),l<z&&(m=!1,c=r,null==q&&("left"!==p&&"right"!==p||a.insertAfter(h),h.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(s).trigger("sticky_kit:unstick")),w&&(b=d.height(),t>b&&!u&&(c-=k,c=Math.max(b-t,c),c=Math.min(r,c),m&&a.css({top:c+"px"})))):l>z&&(m=!0,b={position:"fixed",7 -1 top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(s),null==q&&(a.after(h),"left"!==p&&"right"!==p||h.append(a)),a.trigger("sticky_kit:stick"));if(m&&(null==g&&(g=l+t+c>x+n),!u&&g))return u=!0,"static"===f.css("position")&&f.css({position:"relative"}),a.css({position:"absolute",bottom:e,top:"auto"}).trigger("sticky_kit:bottom")},v=function(){B();return b()},A=function(){d.off("touchmove",b);d.off("scroll",b);d.off("resize",v);k(document.body).off("sticky_kit:recalc",8 -1 v);a.off("sticky_kit:detach",A);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:""});f.position("position","");if(m)return null==q&&("left"!==p&&"right"!==p||a.insertAfter(h),h.remove()),a.removeClass(s)},d.on("touchmove",b),d.on("scroll",b),d.on("resize",v),k(document.body).on("sticky_kit:recalc",v),a.on("sticky_kit:detach",A),setTimeout(b,0)}};n=0;for(D=this.length;n<D;n++)e=this[n],C(k(e));return this}}).call(this);-1 4 (function(){var k,d;k=this.jQuery||window.jQuery;d=k(window);k.fn.stick_in_parent=function(e){var w,n,r,h,s,C,p,D;null==e&&(e={});s=e.sticky_class;w=e.inner_scrolling;h=e.parent;r=e.offset_top;n=e.spacer;null==r&&(r=0);null==h&&(h=void 0);null==w&&(w=!0);null==s&&(s="is_stuck");C=function(a,e,p,x,z,t,q){var u,A,m,y,c,f,B,v,g,b;if(!a.data("sticky_kit")){a.data("sticky_kit",!0);f=a.parent();null!=h&&(f=f.closest(h));if(!f.length)throw"failed to find stick parent";u=m=!1;(g=null!=n?n&&a.closest(n):k("<div />"))&& -1 5 g.css("position",a.css("position"));B=function(){var c,d,l;c=parseInt(f.css("border-top-width"),10);d=parseInt(f.css("padding-top"),10);e=parseInt(f.css("padding-bottom"),10);p=f.offset().top+c+d;x=f.height();m&&(u=m=!1,null==n&&(a.insertAfter(g),g.detach()),a.css({position:"",top:"",width:"",bottom:""}).removeClass(s),l=!0);z=a.offset().top-parseInt(a.css("margin-top"),10)-r;t=a.outerHeight(!0);q=a.css("float");g&&g.css({width:a.outerWidth(!0),height:t,display:a.css("display"),"vertical-align":a.css("vertical-align"), -1 6 "float":q});if(l)return b()};B();if(t!==x)return y=void 0,c=r,b=function(){var b,k,l,h;l=d.scrollTop();null!=y&&(k=l-y);y=l;m?(h=l+t+c>x+p,u&&!h&&(u=!1,a.css({position:"fixed",bottom:"",top:c}).trigger("sticky_kit:unbottom")),l<z&&(m=!1,c=r,null==n&&("left"!==q&&"right"!==q||a.insertAfter(g),g.detach()),b={position:"",width:"",top:""},a.css(b).removeClass(s).trigger("sticky_kit:unstick")),w&&(b=d.height(),t>b&&!u&&(c-=k,c=Math.max(b-t,c),c=Math.min(r,c),m&&a.css({top:c+"px"})))):l>z&&(m=!0,b={position:"fixed", -1 7 top:c},b.width="border-box"===a.css("box-sizing")?a.outerWidth()+"px":a.width()+"px",a.css(b).addClass(s),null==n&&(a.after(g),"left"!==q&&"right"!==q||g.append(a)),a.trigger("sticky_kit:stick"));if(m&&(null==h&&(h=l+t+c>x+p),!u&&h))return u=!0,"static"===f.css("position")&&f.css({position:"relative"}),a.css({position:"absolute",bottom:e,top:"auto"}).trigger("sticky_kit:bottom")},v=function(){B();return b()},A=function(){d.off("touchmove",b);d.off("scroll",b);d.off("resize",v);k(document.body).off("sticky_kit:recalc", -1 8 v);a.off("sticky_kit:detach",A);a.removeData("sticky_kit");a.css({position:"",bottom:"",top:""});f.position("position","");if(m)return null==n&&("left"!==q&&"right"!==q||a.insertAfter(g),g.remove()),a.removeClass(s)},d.on("touchmove",b),d.on("scroll",b),d.on("resize",v),k(document.body).on("sticky_kit:recalc",v),a.on("sticky_kit:detach",A),setTimeout(b,0)}};p=0;for(D=this.length;p<D;p++)e=this[p],C(k(e));return this}}).call(this);
diff --git a/test/index.html b/test/index.html
@@ -50,6 +50,10 @@ 50 50 display: block; 51 51 } 52 52 -1 53 .hidden { -1 54 display: none; -1 55 } -1 56 53 57 .borders { 54 58 padding: 40px; 55 59 border: 60px solid green; @@ -195,6 +199,12 @@ 195 199 <div class="full static" style="margin: 10px auto; width: 400px;"></div> 196 200 </div> 197 201 -1 202 <h1>Hidden element</h1> -1 203 <div class="container one"> -1 204 <div class="item"></div> -1 205 <div class="item full" id="grow_1"></div> -1 206 <div class="item"></div> -1 207 </div> 198 208 199 209 <div class="full"></div> 200 210