FixedHeader和固定菜单栏

Question

我现在一直在修补这个问题，所以我在这里提出了问题。我正在尝试在网页上放置一个菜单栏。我的方法的问题是内容页面在菜单栏后面“滚动”，这会导致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;
}

我能做些什么来阻止桌子一直向上滚动并且标题停在菜单下方？

Answer 1

我想您可以在DataTable / FixedHeader的文档中找到答案。正如您在此处所见，您可以specify the following：

  

offsetTop 指定窗口顶部的偏移，其中滚动时要锁定的固定标题。这很有用   使用页面顶部的固定元素 - 例如   Twitter Bootstrap固定菜单。

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

将offsetTop更改为菜单栏的高度（50），您应该全部设置好！

此外，您还可以向z-index添加一个较大的#header，以确保其保持在其他元素的“顶部”。

#header {
    z-index: 9999;
    /* And your other properties here */
}