Merge pull request #14207 from twbs/charlesbjohnson-affix-bottom-when-dynamic-height

Charlesbjohnson affix bottom when dynamic height

js/affix.js

@@ -37,6 +37,28 @@
     target: window
   }
 
+  Affix.prototype.getState = function (scrollHeight, height, offsetTop, offsetBottom) {
+    var scrollTop    = this.$target.scrollTop()
+    var position     = this.$element.offset()
+    var targetHeight = this.$target.height()
+
+    if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false
+
+    if (this.affixed == 'bottom') {
+      if (offsetTop != null) return (scrollTop + this.unpin <= position.top) ? false : 'bottom'
+      return (scrollTop + targetHeight <= scrollHeight - offsetBottom) ? false : 'bottom'
+    }
+
+    var initializing   = this.affixed == null
+    var colliderTop    = initializing ? scrollTop : position.top
+    var colliderHeight = initializing ? targetHeight : height
+
+    if (offsetTop != null && colliderTop <= offsetTop) return 'top'
+    if (offsetBottom != null && (colliderTop + colliderHeight >= scrollHeight - offsetBottom)) return 'bottom'
+
+    return false
+  }
+
   Affix.prototype.getPinnedOffset = function () {
     if (this.pinnedOffset) return this.pinnedOffset
     this.$element.removeClass(Affix.RESET).addClass('affix')
@@ -52,42 +74,40 @@
   Affix.prototype.checkPosition = function () {
     if (!this.$element.is(':visible')) return
 
-    var scrollHeight = $(document).height()
+    var height       = this.$element.height()
-    var scrollTop    = this.$target.scrollTop()
-    var position     = this.$element.offset()
     var offset       = this.options.offset
     var offsetTop    = offset.top
     var offsetBottom = offset.bottom
+    var scrollHeight = $('body').height()
 
     if (typeof offset != 'object')         offsetBottom = offsetTop = offset
     if (typeof offsetTop == 'function')    offsetTop    = offset.top(this.$element)
     if (typeof offsetBottom == 'function') offsetBottom = offset.bottom(this.$element)
 
-    var affix = this.unpin   != null && (scrollTop + this.unpin <= position.top) ? false :
+    var affix = this.getState(scrollHeight, height, offsetTop, offsetBottom)
-                offsetBottom != null && (position.top + this.$element.height() >= scrollHeight - offsetBottom) ? 'bottom' :
-                offsetTop    != null && (scrollTop <= offsetTop) ? 'top' : false
 
-    if (this.affixed === affix) return
+    if (this.affixed != affix) {
-    if (this.unpin != null) this.$element.css('top', '')
+      if (this.unpin != null) this.$element.css('top', '')
 
-    var affixType = 'affix' + (affix ? '-' + affix : '')
+      var affixType = 'affix' + (affix ? '-' + affix : '')
-    var e         = $.Event(affixType + '.bs.affix')
+      var e         = $.Event(affixType + '.bs.affix')
 
-    this.$element.trigger(e)
+      this.$element.trigger(e)
 
-    if (e.isDefaultPrevented()) return
+      if (e.isDefaultPrevented()) return
 
-    this.affixed = affix
+      this.affixed = affix
-    this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
+      this.unpin = affix == 'bottom' ? this.getPinnedOffset() : null
 
-    this.$element
+      this.$element
-      .removeClass(Affix.RESET)
+        .removeClass(Affix.RESET)
-      .addClass(affixType)
+        .addClass(affixType)
-      .trigger(affixType.replace('affix', 'affixed') + '.bs.affix')
+        .trigger(affixType.replace('affix', 'affixed') + '.bs.affix')
+    }
 
     if (affix == 'bottom') {
       this.$element.offset({
-        top: scrollHeight - this.$element.height() - offsetBottom
+        top: scrollHeight - height - offsetBottom
       })
     }
   }

js/tests/visual/affix.html

@@ -6,12 +6,36 @@
 
   <style>
     /* Test Styles */
-    .affix {
+    .affixed-element-top.affix {
       top: 10px;
     }
-    .affix-bottom {
+    .affixed-element-top.affix-bottom {
       position: absolute;
     }
+    .affixed-element-bottom {
+      margin-bottom: 0;
+    }
+    .affixed-element-bottom.affix {
+      bottom: 10px;
+    }
+    .affixed-element-bottom.affix-bottom {
+      position: relative;
+    }
+    .grow-btn, .shrink-btn {
+      color: #FFF;
+    }
+    .grow-btn {
+      background-color: #2ECC40;
+    }
+    .grow-btn:hover {
+      background-color: #3D9970;
+    }
+    .shrink-btn {
+      background-color: #FF4136;
+    }
+    .shrink-btn:hover {
+      background-color: #85144B;
+    }
   </style>
 </head>
 <body>
@@ -23,7 +47,7 @@
   </div>
 
   <div class="col-md-3">
-    <ul class="list-group js-affixed-element">
+    <ul class="list-group affixed-element-top js-affixed-element-top">
       <li class="list-group-item">Cras justo odio</li>
       <li class="list-group-item">Dapibus ac facilisis in</li>
       <li class="list-group-item">Morbi leo risus</li>
@@ -43,7 +67,7 @@
     </ul>
   </div>
 
-  <div class="col-md-9">
+  <div class="col-md-6 js-content">
 
     <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
 
@@ -199,6 +223,27 @@
 
   </div>
 
+  <div class="col-md-3">
+    <ul class="list-group affixed-element-bottom js-affixed-element-bottom">
+      <li class="list-group-item">Sit necessitatibus aspernatur.</li>
+      <li class="list-group-item">Adipisicing alias dolor!</li>
+      <li class="list-group-item">Ipsum molestiae impedit.</li>
+      <li class="list-group-item">Amet quis iste?</li>
+      <li class="list-group-item">Ipsum quaerat porro.</li>
+      <li class="list-group-item">Elit lorem libero.</li>
+      <li class="list-group-item">Ipsum dolore facilis.</li>
+      <li class="list-group-item">Elit ad atque.</li>
+      <li class="list-group-item">Dolor amet sequi!</li>
+      <li class="list-group-item">Consectetur voluptatum facilis!</li>
+      <li class="list-group-item">Sit neque eligendi?</li>
+      <li class="list-group-item">Amet fuga consectetur!</li>
+      <li class="list-group-item">Amet molestias repellat!</li>
+      <li class="list-group-item">Consectetur minima repellendus.</li>
+      <li class="list-group-item grow-btn js-grow-btn">Grow content</li>
+      <li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
+    </ul>
+  </div>
+
   <div class="col-md-12 js-footer">
     <hr>
 
@@ -222,7 +267,7 @@
 <!-- JavaScript Test -->
 <script>
 $(function () {
-  $('.js-affixed-element').affix({
+  $('.js-affixed-element-top').affix({
     offset: {
       top: $('.js-page-header').outerHeight(true) - 10
     , bottom: $('.js-footer').outerHeight(true) + 10
@@ -232,6 +277,19 @@ $(function () {
   .on('affix.bs.affix', function (e) {
     $(e.target).width(e.target.offsetWidth)
   })
+
+  $('.js-affixed-element-bottom').affix({
+    offset: {
+      bottom: $('.js-footer').outerHeight(true) + 10
+    }
+  })
+
+  $('.js-grow-btn').on('click', function() {
+    $('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
+  })
+  $('.js-shrink-btn').on('click', function() {
+    $('.js-content p').last().remove()
+  })
 })
 </script>
 </body>