Проблема с аффиксом начальной загрузки, когда аффикс 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 */
}