Sidebar Bootstrap - machen auf Scroll-Position fixiert je

Question

Bitte meine Geige unten:

https://jsfiddle.net/okiewardoyo/s23v891m/11/

.affix { 
    top: 0; 
} 

Um den Bildschirm zu verbreitern, blättern Sie Ihren Bildschirm.

Was ich will ist, wenn ich scroll, die Sidebar wird behoben, wenn Scrollen den unteren Rand der Kopfzeile erreichen.

Dann, wenn ich scrollen und die Fußzeile erreichen, ist die Seitenleiste nicht fixiert und es folgt der Fußzeile.

Answer 1

Sie müssen der Inhaltsklasse einen Offset hinzufügen und ihn mit jQuery wieder entfernen.

Fügen Sie die ID 'content' zu Ihrem Inhaltsdiv hinzu. Dann fügen Sie die folgende jQuery-Skript:

$('.sidebar').on('affix.bs.affix', function() { 
    $('#content').addClass('col-sm-offset-3'); 
}).on('affix-top.bs.affix', function(){ 
    $('#content').removeClass('col-sm-offset-3'); 
}); 

Sie können dies hier testen: https://jsfiddle.net/TimOgilvy/s23v891m/16/

Hinweis habe ich eine clearfix an den Header.