jquery - 2 つの固定 div - 左右

Question

Web ページに 2 つの固定 div を作成したいと考えています。最初は左側に、2 番目は右側に配置する必要があります。いくつかのコードを作成しましたが、完全には機能しません。

私はそれを修正する方法がわかりません。解決策はありますか？

score 2 · Accepted Answer

固定列の幅に等しいmarginto #mainを提供することにより、その領域が左に戻るのを防ぎます。列に適用position:fixedすると、それらの要素がドキュメントの流れから除外されます。

position:fixedは (JS を使用して) 列に動的に適用されるため、タイミングの目的のみであれば、 #main にも動的に適用することを検討できますmargin。

score 0 · Accepted Answer

ページがスクロールするときは、クラスandを適用して、要素にaposition:fixedを設定しています。#aside#bsidefixedfixed2

および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');
}

2 に答える 2