relatively-sticky

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

commit
4c0aec5330764b18cc599aa46dd11ab8ea83a9a5
parent
3906845705fcce8de9ee036c7fa921ba022ddd5e
Author
leaf corcoran <leafot@gmail.com>
Date
2013-11-16 05:32
add detach method, fixes #11 #17

Diffstat

M jquery.sticky-kit.coffee 27 ++++++++++++++++++++++++---
M jquery.sticky-kit.js 27 ++++++++++++++++++++++-----
M jquery.sticky-kit.min.js 9 +++++----
M test/two.html 21 ++++++++++++++++++---

4 files changed, 69 insertions, 15 deletions


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

@@ -142,12 +142,33 @@ $.fn.stick_in_parent = (opts={}) ->
  142   142               top: ""
  143   143             }).trigger("sticky_kit:bottom")
  144   144 
  145    -1       win.on "scroll", tick
  146    -1       setTimeout tick, 0
  147    -1       $(document.body).on "sticky_kit:recalc", ->
   -1   145       recalc = ->
  148   146         recalc()
  149   147         tick()
  150   148 
   -1   149       detach = ->
   -1   150         win.off "scroll", tick
   -1   151         $(document.body).off "sticky_kit:recalc", recalc
   -1   152         elm.off "sticky_kit:detach", detach
   -1   153 
   -1   154         elm.css {
   -1   155           position: ""
   -1   156           bottom: ""
   -1   157           top: ""
   -1   158         }
   -1   159 
   -1   160         parent.position "position", ""
   -1   161 
   -1   162         if elm.is ".is_stuck"
   -1   163           elm.insertAfter(spacer).removeClass "is_stuck"
   -1   164           spacer.remove()
   -1   165 
   -1   166       win.on "scroll", tick
   -1   167       $(document.body).on "sticky_kit:recalc", recalc
   -1   168       elm.on "sticky_kit:detach", detach
   -1   169 
   -1   170       setTimeout tick, 0
   -1   171 
  151   172     ) $ elm
  152   173   @
  153   174 

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

@@ -30,7 +30,7 @@
   30    30       sticky_class = "is_stuck";
   31    31     }
   32    32     _fn = function(elm, padding_bottom, parent_top, parent_height, top, height) {
   33    -1       var bottomed, fixed, float, last_pos, offset, parent, recalc, reset_width, spacer, tick;
   -1    33       var bottomed, detach, fixed, float, last_pos, offset, parent, recalc, reset_width, spacer, tick;
   34    34       parent = elm.parent();
   35    35       if (parent_selector != null) {
   36    36         parent = parent.closest(parent_selector);
@@ -151,12 +151,29 @@
  151   151           }
  152   152         }
  153   153       };
  154    -1       win.on("scroll", tick);
  155    -1       setTimeout(tick, 0);
  156    -1       return $(document.body).on("sticky_kit:recalc", function() {
   -1   154       recalc = function() {
  157   155         recalc();
  158   156         return tick();
  159    -1       });
   -1   157       };
   -1   158       detach = function() {
   -1   159         win.off("scroll", tick);
   -1   160         $(document.body).off("sticky_kit:recalc", recalc);
   -1   161         elm.off("sticky_kit:detach", detach);
   -1   162         elm.css({
   -1   163           position: "",
   -1   164           bottom: "",
   -1   165           top: ""
   -1   166         });
   -1   167         parent.position("position", "");
   -1   168         if (elm.is(".is_stuck")) {
   -1   169           elm.insertAfter(spacer).removeClass("is_stuck");
   -1   170           return spacer.remove();
   -1   171         }
   -1   172       };
   -1   173       win.on("scroll", tick);
   -1   174       $(document.body).on("sticky_kit:recalc", recalc);
   -1   175       elm.on("sticky_kit:detach", detach);
   -1   176       return setTimeout(tick, 0);
  160   177     };
  161   178     for (_i = 0, _len = this.length; _i < _len; _i++) {
  162   179       elm = this[_i];

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

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

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

@@ -55,10 +55,16 @@
   55    55   <script src="../jquery.sticky-kit.js"></script>
   56    56 </head>
   57    57 <body>
   58    -1 <div class="fixed">hello</div>
   -1    58 <div class="fixed">
   -1    59   hello
   -1    60   <button class="detach">Detach</button>
   -1    61   <button class="attach">Attach</button>
   -1    62 </div>
   59    63 
   60    64 <div class="container" id="container">
   61    -1   <div class="header">The Header</div>
   -1    65   <div class="header">
   -1    66     The Header
   -1    67   </div>
   62    68 
   63    69   <div class="outer">
   64    70     <div class="left">Hello world</div>
@@ -91,7 +97,16 @@
   91    97   </div>
   92    98 </div>
   93    99 <script type="text/javascript">
   94    -1   $(".right").stick_in_parent({container: $("#container"), offset_top: 100});
   -1   100   function attach() {
   -1   101     $(".right").stick_in_parent({container: $("#container"), offset_top: 100});
   -1   102   }
   -1   103 
   -1   104   $(document.body).on("click", ".detach", function(e) {
   -1   105     $(".right").trigger("sticky_kit:detach");
   -1   106   });
   -1   107 
   -1   108   $(document.body).on("click", ".attach", attach);
   -1   109   attach();
   95   110 </script>
   96   111 
   97   112 </body>