Problem mit Affix Bootstrap, wenn das Affix div größer ist als der Inhalt und das Fenster

Question

Ich habe ein Problem mit Affix Bootstrap, wenn das Affix Div größer als der Hauptinhalt und das Fenster ist.

hier alles in Ordnung ist, weil es genügend Inhalte sind: 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 
}); 

Siehe das Problem hier, wenn der Inhalt nicht groß genug ist: http://jsfiddle.net/90m0r91t/ (es gibt ein Problem, wenn Affix-top wird Affix)

Wie kann ich es beheben, so dass das Affix div bleibt statisch und nicht behoben, wenn es nicht genug Inhalt gibt?

Danke

Answer 1

Remove Position absolut von .affix-bottom

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

Answer 2

jquery verwenden, erhalten die Höhe des Dokuments, abzüglich der Kopf- und Fußzeile Höhen. Dann verwenden Sie dies, um eine if-Anweisung auf den Affix zu setzen.

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/