Issue with affix bootstrap when the affix div is bigger than content and the window

Question

I have a an issue with affix bootstrap, when the affix div is bigger than the main content and the window.

Here, all is ok because there are enough content: 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
});

See the issue here, when the content isn't big enough: http://jsfiddle.net/90m0r91t/ (there is an issue when affix-top becomes affix)

How can i fix it so the affix div stays static and not fixed when there is no enough content?

Thank you

Answer 1

Using jquery, get the height of the document, less the header and footer heights. Then use this to put an if statement on the affix.

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
      });
  })
}

DEMO: http://jsfiddle.net/d8jzenbr/6/

Answer 2

Remove position absolute from .affix-bottom

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