My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it unclickable. Any help on resolving this would be appreciated.
Below is the code for my sticky navigation menu bar:
CSS:
.sticky { position: fixed; height: 2.2em; width: 100%; top: 0; left: 0; background-color: rgb(224,224,224); }
.sticky li { display: inline-block; }
.sticky * { display: inline; }
HTML:
<div class="sticky">
<reportname>reportname</reportname>
<ul>
fly to:
<li> <a href=#Samples> Samples </a> </li>
<li> <a href=#Navigation> Navigation </a> </li>
<li> <a href=#Tables> Tables </a> </li>
<li> <a href=#Plots> Plots </a> </li>
</ul>
<reporthead>reporthead</reporthead>
</div>
The following scripts are used for DataTables:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css" />
<script>
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
and the table itself:
<table id="example" class="display" cellspacing="0" width="100%">