FixedHeader and fixed menu bar
I've been doing this for too long, so I posed questions here. I am trying to have a menu bar on top of a webpage. The problem with my approach is that the content page is scrolling behind the menu bar, which causes problems for the DataTable / FixedHeader . Instead of stopping the table header in the menu, it scrolls through the menu and locks at the top of the screen. 
...
css looks like this:
#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;
}
Is there anything I can do to stop the table from scrolling to the end and the title stops below the menu?
source to share
I think you can find your answer in the DataTable / FixedHeader documentation. As you can see here, you can specify the following :
offsetTop Specify the offset at the top of the window where the fixed title should be locked when scrolling. This is useful for working with fixed elements at the top of the page - for example, Twitter Bootstrap's fixed menu.
$(document).ready( function () {
var oTable = $('#example').dataTable();
new FixedHeader( table, {
"offsetTop": 40
} );
} );
Change offsetTop
to the height of the menu bar (50) and everything should be set!
Alternatively, you can add a large one z-index
to #header
keep it "on top" of other elements.
#header {
z-index: 9999;
/* And your other properties here */
}
source to share