FixedHeader和固定菜单栏

我一直在修补这个太久了，所以我在这里提出了问题。我试图在网页的顶部有一个菜单栏。我的方法存在的问题是内容页面在菜单栏后面滚动，导致DataTable/FixedHeader出现问题。它不是在菜单中停止表格的标题，而是滚动到菜单并锁定在屏幕的顶部。 enter image description here 。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; 
}

有什么我可以做停止滚动浏览表一路攀升和标题停止菜单下方？

来源

2013-01-20 orange

删除'position：fixed;'或更改'top：0' ..？ – Popnoodles

属性是“保证金”，而不是“保证金”，您也可以尝试“填充顶部”，看看是否有帮助 – arieljuod

@arieljuod：良好的捕获，但没有这样做。 – orange

我想你可能会在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 */ 
}

来源

2013-01-20 13:47:16 MarcoK

有趣。出于某种原因，这对我不起作用。从这个描述的演示似乎也没有工作。 – orange

没关系。有用。不知道最初出了什么问题。谢谢你的帮助。 – orange

FixedHeader和固定菜单栏

回答

相关问题