FixedHeader and fixed menu bar

Question

I've been tinkering with this too long now, so I put out the questions here. I'm trying to have a menu bar on top of a web page. The problem with my approach is that the content page gets scrolled 'behind' the menu bar which causes problems for DataTable/FixedHeader. Instead of stopping the header of the table at the menu, it scrolls into the menu and locks at the top of the screen..

The 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 scrolling all the way up and the header stopping below the menu?

Answer 1

I think you might find your answer in the documentation of DataTable/FixedHeader. As you can see here, you can 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
    } );
} );

Change the offsetTop to the height of your menu bar (50), and you should be all set!

Additionally, you could also add a big z-index to the #header to ensure it stays "on top" of other elements.

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