Option to stack bottom

README.md

@@ -8,6 +8,8 @@ _Slinky is currently implemented as a jQuery plugin but if there is enough deman
 
 Download the [production version][min] or the [development version][max] and include it after jQuery. Then just call `$('.nav').slinky()` for example to enable Slinky on all elements with a `nav` class.
 
+If you want the headers to stack only on the top but not the bottom, you can pass in an option during the initialization. `$('.nav').slinky({ stackBottom: false })`
+
 [min]: https://raw.github.com/iclanzan/slinky/master/dist/jquery.slinky.min.js
 [max]: https://raw.github.com/iclanzan/slinky/master/dist/jquery.slinky.js
 
@@ -57,5 +59,6 @@ Thanks to [@callmevlad](https://twitter.com/callmevlad) for the idea!
 
 ## Release History ##
 
++ **v0.1.2 (2014-09-23)** Added option for not stacking headers on the bottom.
 + **v0.1.1 (2014-02-06)** Fixed rendering glitches on high density screens.
 + **v0.1.0 (2014-01-31)** Initial version

dist/jquery.slinky.js

@@ -11,7 +11,9 @@
   var pluginName = 'slinky';
 
   var slinky = $.fn[pluginName] = function (options) {
-    options = $.extend({}, slinky.options, options);
+    options = $.extend({
+      stackBottom: true
+    }, slinky.options, options);
 
     return this.each(function () {
       var $element = $(this);
@@ -33,7 +35,7 @@
           if (top <= header.top) {
             position = 'top';
           }
-          else if (top + header.height >= scrollerHeight - header.bottom) {
+          else if (options.stackBottom === true && top + header.height >= scrollerHeight - header.bottom) {
             position = 'bottom';
           }
 

src/slinky.js

@@ -11,7 +11,9 @@
   var pluginName = 'slinky';
 
   var slinky = $.fn[pluginName] = function (options) {
-    options = $.extend({}, slinky.options, options);
+    options = $.extend({
+      stackBottom: true
+    }, slinky.options, options);
 
     return this.each(function () {
       var $element = $(this);
@@ -33,7 +35,7 @@
           if (top <= header.top) {
             position = 'top';
           }
-          else if (top + header.height >= scrollerHeight - header.bottom) {
+          else if (options.stackBottom === true && top + header.height >= scrollerHeight - header.bottom) {
             position = 'bottom';
           }
 

test/slinky.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <title>Slinky Test Suite</title>
   <!-- Load local jQuery. -->
-  <script src="../bower_components/jquery/jquery.js"></script>
+  <script src="../bower_components/jquery/dist/jquery.js"></script>
   <!-- Load local QUnit. -->
   <link rel="stylesheet" href="../bower_components/qunit/qunit/qunit.css" media="screen">
   <script src="../bower_components/qunit/qunit/qunit.js"></script>

test/slinky_test.js

@@ -69,6 +69,32 @@
     strictEqual($headers.eq(6).css('bottom'), '0px', 'last header should be positioned');
   });
 
+  test('initial header positions with no bottom stack', function() {
+    var $headers = $('header');
+    this.$nav.slinky({stackBottom:false});
+
+    expect(13);
+    strictEqual($headers.eq(0).css('position'), 'absolute', 'first header should be positioned');
+    strictEqual($headers.eq(0).css('top'), '0px', 'first header should be positioned');
+
+    strictEqual($headers.eq(1).css('position'), 'static', 'second header should be static');
+
+    strictEqual($headers.eq(2).css('position'), 'static', 'third header should be positioned');
+    strictEqual($headers.eq(2).css('bottom'), 'auto', 'third header should be positioned');
+
+    strictEqual($headers.eq(3).css('position'), 'static', 'fourth header should be positioned');
+    strictEqual($headers.eq(3).css('bottom'), 'auto', 'fourth header should be positioned');
+
+    strictEqual($headers.eq(4).css('position'), 'static', 'fifth header should be positioned');
+    strictEqual($headers.eq(4).css('bottom'), 'auto', 'fifth header should be positioned');
+
+    strictEqual($headers.eq(5).css('position'), 'static', 'sixth header should be positioned');
+    strictEqual($headers.eq(5).css('bottom'), 'auto', 'sixth header should be positioned');
+
+    strictEqual($headers.eq(6).css('position'), 'static', 'last header should be positioned');
+    strictEqual($headers.eq(6).css('bottom'), 'auto', 'last header should be positioned');
+  });
+
   asyncTest('half-way scroll header positions', function() {
     var $headers = $('header');
     this.$nav.slinky();