當詞綴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 */
}