当词缀div大于内容和窗口时，附带引导程序的问题

Question

当词缀div大于主要内容和窗口时，我有一个关于词缀引导程序的问题。

在这里，一切都很好，因为有足够的内容： 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成为词缀时出现问题）

我怎么能修复它所以当没有足够的内容时，词缀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/

Answer 2

从.affix-bottom删除绝对位置

.affix-bottom{
position:absolute /* Comment out this line */
}