First of all, there are indeed multiple similar questions but they are not working in my case. Related, Other related
The structure is like page > div > div > stuff + table
I am using Gridstack.js and here is my current code
$('.grid-stack').gridstack();table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" />
<script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js'></script>
<body>
<div class="grid-stack">
<div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="10" data-gs-height="2">
<div class="grid-stack-item-content">
<h3>Title</h3>
<div>
<input type="text">
</div>
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
<table>
<thead>
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mauritius</td>
<td>Castor</td>
<td>F14 3QF</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>[email protected]</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>[email protected]</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>Current behavior
While scrolling inside the div there is nothing special, you will first scroll thought the input, links,... then though the table
Expected behavior
While scrolling, when the header hits the top of the div - the header should be fixed on the top of the div (Not the top of the page). When scrolled back, the header should go back to its normal state.
There is no need to check for the end of the div to hide the header. The end of the div will always be the end of the table.
How can this be achieved ? The header should not be fixed to the top of the page but the top of the div
Note: this should work for IE11 also
