javascript - 当词缀 div 大于内容和窗口时词缀 Bootstrap 出现问题

Question

当词缀 div 大于主要内容和窗口时，词缀 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/