0

親 div の幅と高さがウィンドウ サイズの 100% であるレイアウトに取り組んでいます。

スクロールバーを表示したいので、子divのサイズは次のように固定されています：400pxとオーバーフロー：自動。

この子divには、位置を追加したい要素が1つあります。スクロールイベントで修正されました。

私の問題は、position を追加するたびに発生することです。jQuery を使用して、子 div 内の要素の 1 つに固定されます。

スクロールイベント、子divであっても子divからポップアウトし、z-indexとオーバーフローが高くなります:auto

ここに作業コードとフィドルがあります

ここでの問題は何ですか? 何を修正する必要がありますか??

HTML

<div id="wrapper">
    <div id="content">
        <p id="head">Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
        <p>Lorem ipsum dolor sit amet</p>
    </div>
</div>

CSS

body, html {
    height: 100%
}
#wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    background: #bbb;
    z-index: 999
}
#content {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: auto;
    background: #eee;
    z-index: 99
}
p {
    width: 100%;
    padding: 40px;
}
#head {
    background: green
}
.fixed {
    position: fixed;
}

JS

$("#content").scroll(function() {
    if( $(this).scrollTop() > 0) {
        $('#head').addClass('fixed');
    } else {
        $('#head').removeClass('fixed');
    }         
});
4

3 に答える 3

1

固定位置は常にビューポートに対して相対的であるため、適用した 100% の幅は常にそれを行います。

幅の継承を固定要素に適用することができ、一部のブラウザではうまくいきますが、要素にもパディングがあるため、親の幅でもうまくいきません

この場合、p 要素に 320px の幅をハードコーディングするか、JavaScript ソリューションを使用する必要があります。

于 2012-12-26T07:07:25.220 に答える
0

役立つ場合は、これで遊ぶことができます: http://jsfiddle.net/nWH3S/3/

$("#content").scroll(function() {
  if ($(this).scrollTop() > 0) {

    $('#head').addClass('fixed').css({
        width: $("#content").innerWidth()-20+"px"
    });
  } else {
    $('#head').removeClass('fixed').css({
        width: $(this).width()
    });
  }
});

フィドルをチェックアウトします。

これは次のように修正する必要があります。

p {
  width: 100%;
  padding: 40px 0;// just made the padding for top bottom.
  margin:0;
}
于 2012-12-26T07:18:35.750 に答える