Affix bootstrap issue when affix div has more content and window

Question

I have a problem with affix bootstrap when affix div is larger than main content and window.

Everything is fine here, because there is 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 here the problem when the content is not large enough: http://jsfiddle.net/90m0r91t/ (there is a problem when affix-top becomes stick)

How can I fix it, so the div affix remains static and not fixed when there is not enough content?

thank

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

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

Answer 2

.affix-bottom

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