0

コンテンツをスクロールできるこのコンテナがあります。このコンテナーのヘッダーが常に一番上にあるようにしたいと思います。

http://jsfiddle.net/z9ze5/

容器：

.lists {
    width: 300px;
    height: 250px;  
    margin: 30px auto;
    background: #39C;
    overflow: scroll;
    position: relative;
}

ヘッダ：

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: absolute;
    margin: 0;
    background: #DDD;
    z-index: 999;
}
4

4 に答える 4

2

CSS以外の修正が必要な場合は、このリスナーを追加してください...

$('.lists').scroll(function() {
    $('.box_header', this).css('top', $(this).scrollTop()+'px');
});

次に、.lists css を変更して相対位置を指定します

.box_header {
    width: 100%;
    height:30px;
    overflow:hidden;
    position: relative;
    margin: 0;
    background: #DDD;
    z-index: 999;
}
于 2013-03-13T15:15:14.340 に答える
2

マークアップを変更したい場合は、次の方法があります。 

<div class="lists">
    <header class="box_header">
        <h1>HEADER 2</h1>
        <div class="setting" id="btn2"></div>
    </header>
    <section class="content">
        <p>Lorem Ipsum ....</p>
    </section>
</div>

スクロール領域を<section>(または他のブロック レベルの要素) でラップします。

CSS の場合:

.lists {
width: 300px;
height: 250px;
margin: 30px auto;
background: #39C;
position: relative;
}
section.content {
width: 300px;
height: 220px;
margin: 0 auto;
background: #39C;
position: relative;
top: 30px;
overflow: scroll;
}

フィドルを参照してください: http://jsfiddle.net/audetwebdesign/nGGXx/

より高度な例

次の例を調べると:

http://jsfiddle.net/audetwebdesign/fBNTP/

スクロール ボックスをセミフレキシブル レイアウトに適用する方法を確認できます。スクロール ボックスを 2 つ並べて、幅をページの幅に比例させました。

高さの調整がややこしいです。親コンテナの高さを修正しました。次のルールを参照してください。 

.contentWrapper {
    border: 1px solid red;
    margin-top: 1.00em;
    padding: 30px 0;
    overflow: auto;
    height: 400px;
}

高さを 400px から他の値に変更すると、スクロール ボックスが自動的に調整されます。

願わくば、これらの例が、これらのより高度なレイアウト設計を構築する方法について、あなたや他の人たちにさらに洞察を与えることを願っています.

于 2013-03-13T15:16:07.137 に答える
0

追加の位置を見てください: ヘッダー div .box_header に固定されています。ボックス ヘッダー div の高さのパディングを section.content に追加する必要がある場合がありますが、30px に設定しているので問題ありません。IE6以下では固定位置に問題がありますが、うまくいけば、今はそれでうまくいくでしょう.Mobyをまだ聞いている人よりも、それを使用している人は少ない.

于 2013-03-13T23:28:52.960 に答える
0

相対位置内の絶対位置は、相対コンテナーに対して絶対です。ヘッダーを所定の位置に配置するには、ヘッダーをスクロール コンテナー内ではなく上に配置する必要があります。

于 2013-03-13T15:02:49.043 に答える