3

我一直在修补这个问题太久了，所以我在这里提出了问题。我试图在网页顶部有一个菜单栏。我的方法的问题是内容页面在菜单栏“后面”滚动，这会导致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
    } );
} );

将 更改为offsetTop菜单栏的高度（50），您应该一切就绪！

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

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