html - 固定页眉和固定菜单栏

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 Specify an offset from the top of the window where the fixed header where be locked to when scrolling. This is useful for working with fixed elements at the top of the page - for example the Twitter Bootstrap fixed menu.

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

将 offsetTop 更改为菜单栏的高度 (50)，一切就绪!

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

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