get affix actually working and update docs

docs/assets/css/bootstrap.css

@@ -1042,6 +1042,7 @@ input[type="file"] {
 
 select {
   width: 220px;
+  background-color: #ffffff;
   border: 1px solid #bbb;
 }
 

docs/assets/css/docs.css

@@ -805,9 +805,13 @@ form.bs-docs-example {
   opacity: .75;
 }
 .bs-docs-sidenav.affix {
-  top: 30px;
+  top: 40px;
+}
+.bs-docs-sidenav.affix-bottom {
+  position: absolute;
+  top: auto;
+  bottom: 270px;
 }
-
 
 
 
@@ -860,12 +864,15 @@ form.bs-docs-example {
   }
   /* Widen masthead and social buttons to fill body padding */
   .jumbotron {
-    margin-top:   -20px; /* Offset bottom margin on .navbar */
+    margin-top: -20px; /* Offset bottom margin on .navbar */
   }
   /* Adjust sidenav width */
   .bs-docs-sidenav {
     width: 166px;
   }
+  .bs-docs-sidenav.affix {
+    top: 0px;
+  }
 }
 
 /* Tablet
@@ -921,6 +928,9 @@ form.bs-docs-example {
   .footer p {
     margin-bottom: 9px;
   }
+  .bs-docs-sidenav.affix {
+    top: 0;
+  }
 }
 
 /* Landscape phones

docs/assets/js/application.js

@@ -6,11 +6,21 @@
 
   $(function(){
 
+    var $window = $(window)
+
     // Disable certain links in docs
     $('section [href^=#]').click(function (e) {
       e.preventDefault()
     })
 
+    // side bar
+    $('.bs-docs-sidenav').affix({
+      offset: {
+        top: function () { return $window.width() <= 980 ? 290 : 210 }
+      , bottom: 270
+      }
+    })
+
     // make code pretty
     window.prettyPrint && prettyPrint()
 

docs/assets/js/bootstrap-affix.js

@@ -28,36 +28,38 @@
 
   var Affix = function (element, options) {
     this.options = $.extend({}, $.fn.affix.defaults, options)
-    this.$window = $(window)
-      .on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
-      .on('resize.affix.data-api', $.proxy(this.refresh, this))
+    this.$window = $(window).on('scroll.affix.data-api', $.proxy(this.checkPosition, this))
     this.$element = $(element)
-    this.refresh()
-  }
-
-  Affix.prototype.refresh = function () {
-    this.position = this.$element.offset()
+    this.checkPosition();
   }
 
   Affix.prototype.checkPosition = function () {
     if (!this.$element.is(':visible')) return
 
-    var scrollLeft = this.$window.scrollLeft()
+    var scrollHeight = $(document).height()
       , scrollTop = this.$window.scrollTop()
-      , position = this.position
+      , position = this.$element.offset()
       , offset = this.options.offset
+      , offsetBottom = offset.bottom
+      , offsetTop = offset.top
+      , reset = 'affix affix-top affix-bottom'
       , affix
 
-    if (typeof offset != 'object') offset = { x: offset, y: offset }
+    if (typeof offset != 'object') offsetBottom = offsetTop = offset
+    if (typeof offsetTop == 'function') offsetTop = offset.top()
+    if (typeof offsetBottom == 'function') offsetBottom = offset.bottom()
 
-    affix = (offset.x == null || (position.left - scrollLeft <= offset.x))
-         && (offset.y == null || (position.top  - scrollTop  <= offset.y))
+    affix = this.unpin != null && (scrollTop + this.unpin <= position.top) ?
+      false    : offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ?
+      'bottom' : offsetTop != null && scrollTop <= offsetTop ?
+      'top'    : false
 
-    if (affix == this.affixed) return
+    if (this.affixed === affix) return
 
     this.affixed = affix
+    this.unpin = affix == 'bottom' ? position.top - scrollTop : null
 
-    this.$element[affix ? 'addClass' : 'removeClass']('affix')
+    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
   }
 
 
@@ -84,15 +86,15 @@
  /* AFFIX DATA-API
   * ============== */
 
-  $(function () {
+  $(window).on('load', function () {
     $('[data-spy="affix"]').each(function () {
       var $spy = $(this)
         , data = $spy.data()
 
       data.offset = data.offset || {}
 
-      data.offsetX && (data.offset.x = data.offsetX)
-      data.offsetY && (data.offset.y = data.offsetY)
+      data.offsetBottom && (data.offset.bottom = data.offsetBottom)
+      data.offsetTop && (data.offset.top = data.offsetTop)
 
       $spy.affix(data)
     })

docs/base-css.html

@@ -85,7 +85,7 @@ <h1>Base CSS</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#typography"><i class="icon-chevron-right"></i> Typography</a></li>
           <li><a href="#code"><i class="icon-chevron-right"></i> Code</a></li>
           <li><a href="#tables"><i class="icon-chevron-right"></i> Tables</a></li>

docs/components.html

@@ -85,7 +85,7 @@ <h1>Components</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdowns</a></li>
           <li><a href="#buttonGroups"><i class="icon-chevron-right"></i> Button groups</a></li>
           <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> Button dropdowns</a></li>

docs/customize.html

@@ -85,7 +85,7 @@ <h1>Customize and download</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#components"><i class="icon-chevron-right"></i> 1. Choose components</a></li>
           <li><a href="#plugins"><i class="icon-chevron-right"></i> 2. Select jQuery plugins</a></li>
           <li><a href="#variables"><i class="icon-chevron-right"></i> 3. Customize variables</a></li>

docs/extend.html

@@ -84,7 +84,7 @@ <h1>Extending Bootstrap</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#built-with-less"><i class="icon-chevron-right"></i> Built with LESS</a></li>
           <li><a href="#compiling"><i class="icon-chevron-right"></i> Compiling Bootstrap</a></li>
           <li><a href="#static-assets"><i class="icon-chevron-right"></i> Use as static assets</a></li>

docs/getting-started.html

@@ -85,7 +85,7 @@ <h1>Getting started</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav" >
           <li><a href="#download-bootstrap"><i class="icon-chevron-right"></i> Download</a></li>
           <li><a href="#file-structure"><i class="icon-chevron-right"></i> File structure</a></li>
           <li><a href="#contents"><i class="icon-chevron-right"></i> What's included</a></li>

docs/javascript.html

@@ -84,7 +84,7 @@ <h1>JavaScript for Bootstrap</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li>
           <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li>
           <li><a href="#modals"><i class="icon-chevron-right"></i> Modal</a></li>
@@ -1596,7 +1596,6 @@ <h4>.typeahead(options)</h4>
               <h1>Affix <small>bootstrap-affix.js</small></h1>
             </div>
 
-
             <h2>Example</h2>
             <p>The subnavigation on the left is a live demo of the affix plugin.</p>
 
@@ -1605,30 +1604,29 @@ <h2>Example</h2>
             <h2>Usage</h2>
 
             <h3>Via data attributes</h3>
-            <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. When the affix offsets are satisified, an <code>.affix</code> class is added to the element. </p>
+            <p>To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.</p>
 
-            <pre class="prettyprint linenums">&lt;div data-spy="affix"&gt;...&lt;/body&gt;</pre>
+            <pre class="prettyprint linenums">&lt;div data-spy="affix" data-offset-top="200"&gt;...&lt;/body&gt;</pre>
 
             <div class="alert alert-info">
               <strong>Heads up!</strong>
-              It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.
+              It's up to you to manage the position of a pinned element. This is done by styling <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>.
             </div>
 
             <h3>Via JavaScript</h3>
             <p>Call the affix plugin via JavaScript:</p>
             <pre class="prettyprint linenums">$('#navbar').affix()</pre>
 
             <h3>Methods</h3>
-            <h4>.scrollspy('refresh')</h4>
-            <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:</p>
+            <h4>.affix('refresh')</h4>
+            <p>When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:</p>
 <pre class="prettyprint linenums">
 $('[data-spy="affix"]').each(function () {
   $(this).affix('refresh')
 });
 </pre>
-
           <h3>Options</h3>
-          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.</p>
+          <p>Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.</p>
           <table class="table table-bordered table-striped">
             <thead>
              <tr>
@@ -1641,9 +1639,9 @@ <h3>Options</h3>
             <tbody>
              <tr>
                <td>offset</td>
-               <td>number | object</td>
+               <td>number | function | object</td>
                <td>10</td>
-               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>.</td>
+               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
              </tr>
             </tbody>
           </table>

docs/scaffolding.html

@@ -84,7 +84,7 @@ <h1>Scaffolding</h1>
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#global"><i class="icon-chevron-right"></i> Global styles</a></li>
           <li><a href="#gridSystem"><i class="icon-chevron-right"></i> Grid system</a></li>
           <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> Fluid grid system</a></li>

docs/templates/pages/base-css.mustache

@@ -14,7 +14,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#typography"><i class="icon-chevron-right"></i> {{_i}}Typography{{/i}}</a></li>
           <li><a href="#code"><i class="icon-chevron-right"></i> {{_i}}Code{{/i}}</a></li>
           <li><a href="#tables"><i class="icon-chevron-right"></i> {{_i}}Tables{{/i}}</a></li>

docs/templates/pages/components.mustache

@@ -14,7 +14,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#dropdowns"><i class="icon-chevron-right"></i> {{_i}}Dropdowns{{/i}}</a></li>
           <li><a href="#buttonGroups"><i class="icon-chevron-right"></i> {{_i}}Button groups{{/i}}</a></li>
           <li><a href="#buttonDropdowns"><i class="icon-chevron-right"></i> {{_i}}Button dropdowns{{/i}}</a></li>

docs/templates/pages/customize.mustache

@@ -14,7 +14,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#components"><i class="icon-chevron-right"></i> {{_i}}1. Choose components{{/i}}</a></li>
           <li><a href="#plugins"><i class="icon-chevron-right"></i> {{_i}}2. Select jQuery plugins{{/i}}</a></li>
           <li><a href="#variables"><i class="icon-chevron-right"></i> {{_i}}3. Customize variables{{/i}}</a></li>

docs/templates/pages/extend.mustache

@@ -13,7 +13,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#built-with-less"><i class="icon-chevron-right"></i> {{_i}}Built with LESS{{/i}}</a></li>
           <li><a href="#compiling"><i class="icon-chevron-right"></i> {{_i}}Compiling Bootstrap{{/i}}</a></li>
           <li><a href="#static-assets"><i class="icon-chevron-right"></i> {{_i}}Use as static assets{{/i}}</a></li>

docs/templates/pages/getting-started.mustache

@@ -14,7 +14,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav" >
           <li><a href="#download-bootstrap"><i class="icon-chevron-right"></i> {{_i}}Download{{/i}}</a></li>
           <li><a href="#file-structure"><i class="icon-chevron-right"></i> {{_i}}File structure{{/i}}</a></li>
           <li><a href="#contents"><i class="icon-chevron-right"></i> {{_i}}What's included{{/i}}</a></li>

docs/templates/pages/javascript.mustache

@@ -13,7 +13,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#overview"><i class="icon-chevron-right"></i> {{_i}}Overview{{/i}}</a></li>
           <li><a href="#transitions"><i class="icon-chevron-right"></i> {{_i}}Transitions{{/i}}</a></li>
           <li><a href="#modals"><i class="icon-chevron-right"></i> {{_i}}Modal{{/i}}</a></li>
@@ -1526,7 +1526,6 @@ $('.carousel').carousel({
               <h1>{{_i}}Affix{{/i}} <small>bootstrap-affix.js</small></h1>
             </div>
 
-
             <h2>{{_i}}Example{{/i}}</h2>
             <p>{{_i}}The subnavigation on the left is a live demo of the affix plugin.{{/i}}</p>
 
@@ -1535,30 +1534,29 @@ $('.carousel').carousel({
             <h2>{{_i}}Usage{{/i}}</h2>
 
             <h3>{{_i}}Via data attributes{{/i}}</h3>
-            <p>{{_i}}To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. When the affix offsets are satisified, an <code>.affix</code> class is added to the element. {{/i}}</p>
+            <p>{{_i}}To easily add affix behavior to any element, just add <code>data-spy="affix"</code> to the element you want to spy on. Then use offsets to define when to toggle the pinning of an element on and off.{{/i}}</p>
 
-            <pre class="prettyprint linenums">&lt;div data-spy="affix"&gt;...&lt;/body&gt;</pre>
+            <pre class="prettyprint linenums">&lt;div data-spy="affix" data-offset-top="200"&gt;...&lt;/body&gt;</pre>
 
             <div class="alert alert-info">
               <strong>{{_i}}Heads up!{{/i}}</strong>
-              {{_i}}It's up to you to maintain the dimensions of an element when toggling between relative and fixed positions. To see how this is done, refer to this pages subnavigation.{{/i}}
+              {{_i}}It's up to you to manage the position of a pinned element. This is done by styling <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>.{{/i}}
             </div>
 
             <h3>{{_i}}Via JavaScript{{/i}}</h3>
             <p>{{_i}}Call the affix plugin via JavaScript:{{/i}}</p>
             <pre class="prettyprint linenums">$('#navbar').affix()</pre>
 
             <h3>{{_i}}Methods{{/i}}</h3>
-            <h4>.scrollspy('refresh')</h4>
-            <p>{{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:{{/i}}</p>
+            <h4>.affix('refresh')</h4>
+            <p>{{_i}}When using affix in conjunction with adding or removing of elements from the DOM, you'll want to call the refresh method:{{/i}}</p>
 <pre class="prettyprint linenums">
 $('[data-spy="affix"]').each(function () {
   $(this).affix('refresh')
 });
 </pre>
-
           <h3>{{_i}}Options{{/i}}</h3>
-          <p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-y=""</code>.{{/i}}</p>
+          <p>{{_i}}Options can be passed via data attributes or JavaScript. For data attributes, append the option name to <code>data-</code>, as in <code>data-offset-top="200"</code>.{{/i}}</p>
           <table class="table table-bordered table-striped">
             <thead>
              <tr>
@@ -1571,9 +1569,9 @@ $('[data-spy="affix"]').each(function () {
             <tbody>
              <tr>
                <td>{{_i}}offset{{/i}}</td>
-               <td>{{_i}}number | object{{/i}}</td>
+               <td>{{_i}}number | function | object{{/i}}</td>
                <td>{{_i}}10{{/i}}</td>
-               <td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>.{{/i}}</td>
+               <td>{{_i}}Pixels to offset from screen when calculating position of scroll. If a single number is provide, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provided an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).{{/i}}</td>
              </tr>
             </tbody>
           </table>

docs/templates/pages/scaffolding.mustache

@@ -13,7 +13,7 @@
     ================================================== -->
     <div class="row">
       <div class="span3 bs-docs-sidebar">
-        <ul class="nav nav-list bs-docs-sidenav" data-spy="affix" data-offset-y="80">
+        <ul class="nav nav-list bs-docs-sidenav">
           <li><a href="#global"><i class="icon-chevron-right"></i> {{_i}}Global styles{{/i}}</a></li>
           <li><a href="#gridSystem"><i class="icon-chevron-right"></i> {{_i}}Grid system{{/i}}</a></li>
           <li><a href="#fluidGridSystem"><i class="icon-chevron-right"></i> {{_i}}Fluid grid system{{/i}}</a></li>