画面の高さ全体を占め、下にスクロールしても変化しないサイドバーが必要です。
したがって、スクロールすると内容のみが変更されますが、ナビゲーションバーは常に同じままです。
私は最初の例を作りました:http://jsfiddle.net/CwSD6/
しかし、スクロールなしの機能がありません...
よろしく
編集:位置を使用する必要があります:固定、上、下、左の値は0です 。http://jsfiddle.net/CwSD6/1/
画面の高さ全体を占め、下にスクロールしても変化しないサイドバーが必要です。
したがって、スクロールすると内容のみが変更されますが、ナビゲーションバーは常に同じままです。
私は最初の例を作りました:http://jsfiddle.net/CwSD6/
しかし、スクロールなしの機能がありません...
よろしく
編集:位置を使用する必要があります:固定、上、下、左の値は0です 。http://jsfiddle.net/CwSD6/1/
それはで行うことによって行うことができposition: fixed;
ます<aside>
このフィドルを参照してくださいjsfiddle
これを試して:
aside
{
position: fixed;
width: 200px;
height: 100%;
top: 0;
left: 0;
border: 1px solid #111;
}
お役に立てれば
グリッドレイアウトで通常は固定または絶対ネジを使用するため、jQueryメソッドを使用します。以下の例では、幅が990ピクセル未満の場合にグリッドが折りたたまれるので、レスポンシブを実行していると仮定してこれを変更する必要があります。
$(window).resize(function() {
var doc_height = $(document).height();
var doc_width = $(document).width()
if (doc_width > 990) {
$('#sidebar').css("height", doc_height);
} else {
$('#sidebar').css("height", 'auto');
}
});
これは最も効率的な方法ではないかもしれませんが、変数を設定する必要はありません。読みやすさに役立つと思います。
よろしく、M