当 Affix div 大于内容和窗口时，Affix Bootstrap 出现问题

Question

当 Affix div 大于主要内容和窗口时，我遇到了 Affix Bootstrap 问题。

在这里，一切都很好，因为有足够的内容：http ://jsfiddle.net/d8jzenbr/

var headerHeight = $('header').outerHeight(true); /
var footerHeight = $('footer').outerHeight() + 60;
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
});

当内容不够大时，请参阅此处的问题：http://jsfiddle.net/90m0r91t/（当 affix-top 变为 affix 时存在问题）

我该如何修复它，以便当没有足够的内容时，后缀 div 保持静态而不是固定？

谢谢

Answer 1

使用jquery，获取文档的高度，减去页眉和页脚的高度。然后用它在词缀上放置一个 if 语句。

if(contentHeight > sidebarHeight) {
  $('#account-overview-container').affix({
      offset: {
          top: headerHeight,
          bottom: footerHeight
      }
  }).on('affix.bs.affix', function () { // before affix
      $(this).css({
          /*'top': headerHeight,*/    // for fixed height
      });
  })
}

演示： http: //jsfiddle.net/d8jzenbr/6/