3

あまりにも長い間これをいじっていたので、ここに質問を出しました。Web ページの上にメニュー バーを表示しようとしています。私のアプローチの問題は、コンテンツページがメニューバーの「後ろ」にスクロールされ、 DataTable/FixedHeaderに問題が発生することです。メニューでテーブルのヘッダーを停止する代わりに、メニューにスクロールし、画面の上部でロックします。ここに画像の説明を入力.

cssはこんな感じ

#header {
    width:100%;
    height:50px;
    position: fixed;
    top:0;
    background-color:rgba(255,0,0,0.5);
}


#content {
    background-color:rgba(0,0,255,0.5);
    position: static;
    margin-top: 50px;
}

テーブルがずっと上にスクロールし、ヘッダーがメニューの下で止まるのを止めるためにできることはありますか?

4

1 に答える 1

3

DataTable/FixedHeaderのドキュメントで答えが見つかるかもしれません。ここでわかるように、次のように指定できます。

offsetTopスクロール時に固定ヘッダーがロックされるウィンドウの上部からのオフセットを指定します。これは、ページ上部の固定要素（Twitter Bootstrap固定メニューなど）を操作する場合に便利です。

$(document).ready( function () {
    var oTable = $('#example').dataTable();
    new FixedHeader( table, {
        "offsetTop": 40
    } );
} );

メニューバーの高さ（50）に変更するoffsetTopと、すべて設定されます。

さらに、に大きな要素を追加して、他の要素の「上」にとどまるようにすることもできz-indexます#header。

#header {
    z-index: 9999;
    /* And your other properties here */
}
于 2013-01-20T13:47:16.803 に答える