ブートストラップのサイドバーは、 - 固定スクロール位置

Question

に応じて作る以下の私のバイオリンを参照してください：画面をスクロール、画面が広いようにするには

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

.affix { 
    top: 0; 
} 

を。

私が望むのは、スクロールすると、スクロールするときにサイドバーが固定されることです。

次に、スクロールしてフッターに到達すると、サイドバーは固定されず、フッターに従います。

Answer 1

コンテンツクラスにオフセットを追加し、jQueryを使用して再度削除する必要があります。

コンテンツIDに「content」というIDを追加します。その後、次のjQueryのスクリプトを追加：

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

あなたはここにこれをテストすることができます：https://jsfiddle.net/TimOgilvy/s23v891m/16/

注意を私はヘッダにclearfixを追加しました。