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)
     })