relatively-sticky

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

commit
9df302c09ee0f2951bb49b332961d097f4d2a0bc
parent
f6d9ed596bf183de29d5686afd4c410597a6324c
Author
leaf corcoran <leafot@gmail.com>
Date
2013-08-01 08:30
finalizing site

Diffstat

M site/index.html 4 ++--
M site/site.moon 8 ++++++++
M site/templates/example.html 2 +-
M site/templates/index.html 13 +++++++------
A site/www/src/jquery.sticky-kit.js 161 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
A site/www/src/jquery.sticky-kit.min.js 7 +++++++

6 files changed, 186 insertions, 9 deletions


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

@@ -1,13 +1,13 @@
    1     1 
    2     2 <div class="nav">
    3     3   <div class="nav_social hidden">
    4    -1     <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="scssphp v$current_version - SCSS compiler for PHP" data-count="horizontal" data-via="moonscript">Tweet</a>
   -1     4     <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="Sticky-kit v$version - A jQuery plugin for sticky elements" data-count="horizontal" data-via="moonscript">Tweet</a>
    5     5     <a href="https://twitter.com/moonscript" class="twitter-follow-button" data-width="70px" data-show-count="false" data-show-screen-name="false">Follow @moonscript</a>
    6     6   </div>
    7     7 
    8     8   <a href="#examples">Examples</a>
    9     9   <a href="#reference">Reference</a>
   10    -1   <a href="" class="hidden">Download</a>
   -1    10   <a href="https://raw.github.com/leafo/sticky-kit/v1.0.0/jquery.sticky-kit.min.js" class="hidden">Download</a>
   11    11 </div>
   12    12 
   13    13 

diff --git a/site/site.moon b/site/site.moon

@@ -2,10 +2,18 @@ require "sitegen"
    2     2 
    3     3 tools = require"sitegen.tools"
    4     4 
   -1     5 exec = (cmd) ->
   -1     6   f = io.popen(cmd)
   -1     7   with f\read "*a"
   -1     8     f\close!
   -1     9 
    5    10 site = sitegen.create_site =>
    6    11   @title = "sticky-kit"
    7    12   @version = "1.0.0"
    8    13 
   -1    14   @full_size = exec("du -bh www/src/jquery.sticky-kit.js | cut -f 1")\lower!
   -1    15   @compressed_size = exec("du -bh www/src/jquery.sticky-kit.min.js | cut -f 1")\lower!
   -1    16 
    9    17   scssphp = tools.system_command "pscss < %s > %s", "css"
   10    18   coffeescript = tools.system_command "coffee -c -s < %s > %s", "js"
   11    19 

diff --git a/site/templates/example.html b/site/templates/example.html

@@ -7,7 +7,7 @@
    7     7   <link rel="stylesheet" href="$root/example.css" />
    8     8 
    9     9   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   10    -1   <script src="$root/../../jquery.sticky-kit.js"></script>
   -1    10   <script src="$root/src/jquery.sticky-kit.js"></script>
   11    11   <script src="$root/example.js"></script>
   12    12 
   13    13 </head>

diff --git a/site/templates/index.html b/site/templates/index.html

@@ -8,7 +8,8 @@
    8     8   <link href='http://fonts.googleapis.com/css?family=Lato:400,900' rel='stylesheet' type='text/css'>
    9     9   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   10    10   <script type="text/javascript" src="$root/main.js"></script>
   11    -1   <script type="text/javascript" src="$root/../../jquery.sticky-kit.js"></script>
   -1    11   <script type="text/javascript" src="$root/src/jquery.sticky-kit.js"></script>
   -1    12   $analytics{"UA-136625-1"}
   12    13 </head>
   13    14 <body>
   14    15 
@@ -18,18 +19,18 @@
   18    19   <div class="downloader">
   19    20     <div class="download_label">Download v$version</div>
   20    21     <div class="download_outer">
   21    -1       <a href="" class="download_row top_row">
   -1    22       <a href="https://rawgithub.com/leafo/sticky-kit/v$version/jquery.sticky-kit.min.js" class="download_row top_row">
   22    23         <span>Compressed</span>
   23    -1         <span class="size">22kb</span>
   -1    24         <span class="size">$compressed_size</span>
   24    25       </a>
   25    -1       <a href="" class="download_row">
   -1    26       <a href="https://rawgithub.com/leafo/sticky-kit/v$version/jquery.sticky-kit.js" class="download_row">
   26    27         <span>Full Source</span>
   27    -1         <span class="size">22kb</span>
   -1    28         <span class="size">$full_size</span>
   28    29       </a>
   29    30     </div>
   30    31 
   31    32     <div class="twitter_buttons">
   32    -1       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="scssphp v$current_version - SCSS compiler for PHP" data-count="horizontal" data-via="moonscript">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
   -1    33       <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://leafo.net/sticky-kit/" data-text="sticky-kit v$version - A jQuery plugin for sticky elements" data-count="horizontal" data-via="moonscript">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
   33    34       <a href="https://twitter.com/moonscript" class="twitter-follow-button" data-width="70px" data-show-count="false" data-show-screen-name="false">Follow @moonscript</a>
   34    35     </div>
   35    36 

diff --git a/site/www/src/jquery.sticky-kit.js b/site/www/src/jquery.sticky-kit.js

@@ -0,0 +1,161 @@
   -1     1 // Generated by CoffeeScript 1.4.0
   -1     2 
   -1     3 /**
   -1     4 @license Sticky-kit v0.0.1 | WTFPL | Leaf Corcoran 2013 | http://leafo.net
   -1     5 */
   -1     6 
   -1     7 
   -1     8 (function() {
   -1     9   var $, win;
   -1    10 
   -1    11   $ = this.jQuery;
   -1    12 
   -1    13   win = $(window);
   -1    14 
   -1    15   $.fn.stick_in_parent = function(opts) {
   -1    16     var elm, inner_scrolling, parent_selector, sticky_class, _fn, _i, _len;
   -1    17     if (opts == null) {
   -1    18       opts = {};
   -1    19     }
   -1    20     sticky_class = opts.sticky_class, inner_scrolling = opts.inner_scrolling, parent_selector = opts.parent;
   -1    21     if (parent_selector == null) {
   -1    22       parent_selector = void 0;
   -1    23     }
   -1    24     if (inner_scrolling == null) {
   -1    25       inner_scrolling = true;
   -1    26     }
   -1    27     if (sticky_class == null) {
   -1    28       sticky_class = "is_stuck";
   -1    29     }
   -1    30     _fn = function(elm, padding_bottom, parent_top, parent_height, top, height) {
   -1    31       var bottomed, fixed, float, last_pos, offset, parent, recalc, reset_width, spacer, tick;
   -1    32       parent = elm.parent();
   -1    33       if (parent_selector != null) {
   -1    34         parent = parent.closest(parent_selector);
   -1    35       }
   -1    36       if (!parent.length) {
   -1    37         throw "failed to find stick parent";
   -1    38       }
   -1    39       recalc = function() {
   -1    40         var border_top, padding_top;
   -1    41         border_top = parseInt(parent.css("border-top-width"), 10);
   -1    42         padding_top = parseInt(parent.css("padding-top"), 10);
   -1    43         padding_bottom = parseInt(parent.css("padding-bottom"), 10);
   -1    44         parent_top = parent.offset().top + border_top + padding_top;
   -1    45         parent_height = parent.height();
   -1    46         top = elm.offset().top - parseInt(elm.css("margin-top"), 10);
   -1    47         return height = elm.outerHeight(true);
   -1    48       };
   -1    49       recalc();
   -1    50       if (height === parent_height) {
   -1    51         return;
   -1    52       }
   -1    53       float = elm.css("float");
   -1    54       spacer = $("<div />").css({
   -1    55         width: elm.outerWidth(true),
   -1    56         height: height,
   -1    57         display: elm.css("display"),
   -1    58         float: float
   -1    59       });
   -1    60       fixed = false;
   -1    61       bottomed = false;
   -1    62       last_pos = void 0;
   -1    63       offset = 0;
   -1    64       reset_width = false;
   -1    65       tick = function() {
   -1    66         var before, css, delta, scroll, will_bottom, win_height;
   -1    67         scroll = win.scrollTop();
   -1    68         if (last_pos != null) {
   -1    69           delta = scroll - last_pos;
   -1    70         }
   -1    71         last_pos = scroll;
   -1    72         if (fixed) {
   -1    73           will_bottom = scroll + height + offset > parent_height + parent_top;
   -1    74           if (bottomed && !will_bottom) {
   -1    75             bottomed = false;
   -1    76             elm.css({
   -1    77               position: "fixed",
   -1    78               bottom: "",
   -1    79               top: 0
   -1    80             }).trigger("sticky_kit:unbottom");
   -1    81           }
   -1    82           if (scroll < top) {
   -1    83             fixed = false;
   -1    84             offset = 0;
   -1    85             if (float === "left" || float === "right") {
   -1    86               elm.insertAfter(spacer);
   -1    87             }
   -1    88             spacer.detach();
   -1    89             css = {
   -1    90               position: ""
   -1    91             };
   -1    92             if (reset_width) {
   -1    93               css.width = "";
   -1    94             }
   -1    95             elm.css(css).removeClass(sticky_class).trigger("sticky_kit:unstick");
   -1    96           }
   -1    97           if (inner_scrolling) {
   -1    98             win_height = win.height();
   -1    99             if (height > win_height) {
   -1   100               if (!bottomed) {
   -1   101                 offset -= delta;
   -1   102                 before = offset;
   -1   103                 offset = Math.max(win_height - height, offset);
   -1   104                 offset = Math.min(0, offset);
   -1   105                 elm.css({
   -1   106                   top: offset + "px"
   -1   107                 });
   -1   108               }
   -1   109             }
   -1   110           }
   -1   111         } else {
   -1   112           if (scroll > top) {
   -1   113             fixed = true;
   -1   114             css = {
   -1   115               position: "fixed",
   -1   116               top: offset
   -1   117             };
   -1   118             if (float === "none" && elm.css("display") === "block") {
   -1   119               css.width = elm.width() + "px";
   -1   120               reset_width = true;
   -1   121             }
   -1   122             elm.css(css).addClass(sticky_class).after(spacer);
   -1   123             if (float === "left" || float === "right") {
   -1   124               spacer.append(elm);
   -1   125             }
   -1   126             elm.trigger("sticky_kit:stick");
   -1   127           }
   -1   128         }
   -1   129         if (fixed) {
   -1   130           if (will_bottom == null) {
   -1   131             will_bottom = scroll + height + offset > parent_height + parent_top;
   -1   132           }
   -1   133           if (!bottomed && will_bottom) {
   -1   134             bottomed = true;
   -1   135             if (parent.css("position") === "static") {
   -1   136               parent.css({
   -1   137                 position: "relative"
   -1   138               });
   -1   139             }
   -1   140             return elm.css({
   -1   141               position: "absolute",
   -1   142               bottom: padding_bottom,
   -1   143               top: ""
   -1   144             }).trigger("sticky_kit:bottom");
   -1   145           }
   -1   146         }
   -1   147       };
   -1   148       win.on("scroll", tick);
   -1   149       return $(document.body).on("sticky_kit:recalc", function() {
   -1   150         recalc();
   -1   151         return tick();
   -1   152       });
   -1   153     };
   -1   154     for (_i = 0, _len = this.length; _i < _len; _i++) {
   -1   155       elm = this[_i];
   -1   156       _fn($(elm));
   -1   157     }
   -1   158     return this;
   -1   159   };
   -1   160 
   -1   161 }).call(this);

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

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