Web ページに 2 つの固定 div を作成したいと考えています。最初は左側に、2 番目は右側に配置する必要があります。いくつかのコードを作成しましたが、完全には機能しません。
デモはこちら
私はそれを修正する方法がわかりません。解決策はありますか?
Web ページに 2 つの固定 div を作成したいと考えています。最初は左側に、2 番目は右側に配置する必要があります。いくつかのコードを作成しましたが、完全には機能しません。
デモはこちら
私はそれを修正する方法がわかりません。解決策はありますか?
固定列の幅に等しいmargin
to #mainを提供することにより、その領域が左に戻るのを防ぎます。列に適用position:fixed
すると、それらの要素がドキュメントの流れから除外されます。
position:fixed
は (JS を使用して) 列に動的に適用されるため、タイミングの目的のみであれば、 #main にも動的に適用することを検討できますmargin
。
ページがスクロールするときは、クラスandを適用して、要素にaposition:fixed
を設定しています。#aside
#bside
fixed
fixed2
およびposition:fixed
に適用された場合、それらはドキュメント フローから除外されるため、要素は予想どおり左に浮いています。#aside
#bside
#main
現在のコードを変更しないようにするための簡単な解決策は、クラスを使用して特定のスタイルを#main
要素に設定し、必要に応じてそのクラスを適用することです。
この実用的なフィドルの例を参照してください。
CSS
.fixMiddle {
position: relative;
left: 190px; /* your #aside width+padding+border */
}
jQuery
if ($('#aside').hasClass('fixed')) {
$('#main').addClass('fixMiddle');
} else {
$('#main').removeClass('fixMiddle');
}