Merge branch '3.0.0-wip' of github.com:twitter/bootstrap into 3.0.0-wip

assets/css/docs.css

@@ -743,7 +743,6 @@ input.focused {
     right:  15px;
     bottom: 15px;
   }
-
   .bs-header {
     font-size: 21px;
     text-align: left;
@@ -799,12 +798,22 @@ input.focused {
 @media screen and (min-width: 992px) {
 
   /* Widen the fixed sidebar */
-  .bs-sidebar.affix {
+  .bs-sidebar.affix,
-    position: fixed; /* Undo the static from mobile-first approach */
+  .bs-sidebar.affix-bottom {
-    top: 50px;
     width: 213px;
   }
-
+  .bs-sidebar.affix {
+    position: fixed; /* Undo the static from mobile-first approach */
+    top: 80px;
+  }
+  .bs-sidebar.affix-bottom {
+    position: absolute; /* Undo the static from mobile-first approach */
+  }
+  .bs-sidebar.affix-bottom .bs-sidenav,
+  .bs-sidebar.affix .bs-sidenav {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
   .bs-header h1,
   .bs-header p {
     margin-right: 380px;
@@ -824,6 +833,7 @@ input.focused {
 @media screen and (min-width: 1200px) {
 
   /* Widen the fixed sidebar again */
+  .bs-sidebar.affix-bottom,
   .bs-sidebar.affix {
     width: 270px;
   }

assets/js/application.js

@@ -13,12 +13,23 @@
       e.preventDefault()
     })
 
+
     // back to top
     setTimeout(function () {
-      $('.bs-sidebar').affix({
+      var $sideBar = $('.bs-sidebar')
+
+      $sideBar.affix({
         offset: {
-          top: function () { return $window.width() <= 980 ? 290 : 210 }
+          top: function () {
-        , bottom: 270
+            var offsetTop      = $sideBar.offset().top
+            var sideBarMargin  = parseInt($sideBar.children(0).css('margin-top'), 10)
+            var navOuterHeight = $('.bs-docs-nav').height()
+
+            return (this.top = offsetTop - navOuterHeight - sideBarMargin)
+          }
+        , bottom: function () {
+            return (this.bottom = $('.bs-footer').outerHeight(true))
+          }
         }
       })
     }, 100)

dist/js/bootstrap.js

@@ -1842,6 +1842,8 @@ if (!jQuery) throw new Error("Bootstrap requires jQuery")
     this.checkPosition()
   }
 
+  Affix.RESET = 'affix affix-top affix-bottom'
+
   Affix.DEFAULTS = {
     offset: 0
   }
@@ -1859,7 +1861,6 @@ if (!jQuery) throw new Error("Bootstrap requires jQuery")
     var offset       = this.options.offset
     var offsetTop    = offset.top
     var offsetBottom = offset.bottom
-    var reset        = 'affix affix-top affix-bottom'
 
     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
     if (typeof offsetTop == 'function')    offsetTop    = offset.top()
@@ -1870,11 +1871,16 @@ if (!jQuery) throw new Error("Bootstrap requires jQuery")
                 offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
 
     if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')
 
     this.affixed = affix
     this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
 
-    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
   }
 
 

javascript.html

@@ -1729,24 +1729,26 @@ $('#myCarousel').on('slide.bs.carousel', function () {
 {% endhighlight %}
 
             <div class="bs-callout bs-callout-warning">
-              <h4>Requires positioning</h4>
+              <h4>Requires independent styling ;)</h4>
-              <p>You must manage the position of a pinned element and the behavior of its immediate parent. Position is controlled by <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. Remember to check for a potentially collapsed parent when the affix kicks in as it's removing content from the normal flow of the page.</p>
+              <p>
+                Affix toggles between three states/classes: <code>affix</code>, <code>affix-top</code>, and <code>affix-bottom</code>. You must provide the styles for these classes yourself (independent of this plugin).
+                The <code>affix-top</code> class should be in the regular flow of the document. The <code>affix</code> class should be fixed to the page. And <code>affix-bottom</code> should be positioned absolute. Note, <code>affix-bottom</code> is special in that the plugin will place the element with js relative to the <code>offset: { bottom: number }</code> option you've provided.
+              </p>
             </div>
 
             <h3>Via JavaScript</h3>
             <p>Call the affix plugin via JavaScript:</p>
 {% highlight js %}
-$('#navbar').affix()
+  $('#myAffix').affix({
+    offset: {
+      top: 100
+    , bottom: function () {
+        return (this.bottom = $('.bs-footer').outerHeight(true))
+      }
+    }
+  })
 {% endhighlight %}
 
-            <h3>Methods</h3>
-            <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>
-{% highlight js %}
-$('[data-spy="affix"]').each(function () {
-  $(this).affix('refresh')
-});
-{% endhighlight %}
 
           <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-top="200"</code>.</p>
@@ -1765,7 +1767,7 @@ $('[data-spy="affix"]').each(function () {
                <td>offset</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 provided, the offset will be applied in both top and left directions. To listen for a single direction, or multiple unique offsets, just provide an object <code>offset: { x: 10 }</code>. Use a function when you need to dynamically provide an offset (useful for some responsive designs).</td>
+               <td>Pixels to offset from screen when calculating position of scroll. If a single number is provided, the offset will be applied in both top and left directions. To provide a unique, bottom and top offset just provide an object <code>offset: { top: 10 }</code> or <code>offset: { top: 10, bottom: 5 }</code>. Use a function when you need to dynamically calculate an offset.</td>
              </tr>
             </tbody>
           </table>

js/affix.js

@@ -36,6 +36,8 @@
     this.checkPosition()
   }
 
+  Affix.RESET = 'affix affix-top affix-bottom'
+
   Affix.DEFAULTS = {
     offset: 0
   }
@@ -53,7 +55,6 @@
     var offset       = this.options.offset
     var offsetTop    = offset.top
     var offsetBottom = offset.bottom
-    var reset        = 'affix affix-top affix-bottom'
 
     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
     if (typeof offsetTop == 'function')    offsetTop    = offset.top()
@@ -64,11 +65,16 @@
                 offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
 
     if (this.affixed === affix) return
+    if (this.unpin) this.$element.css('top', '')
 
     this.affixed = affix
     this.unpin   = affix == 'bottom' ? position.top - scrollTop : null
 
-    this.$element.removeClass(reset).addClass('affix' + (affix ? '-' + affix : ''))
+    this.$element.removeClass(Affix.RESET).addClass('affix' + (affix ? '-' + affix : ''))
+
+    if (affix == 'bottom') {
+      this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })
+    }
   }