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>dignissim.pharetra@aliquetmolestietellus.net</td>
</tr>
<tr>
<td>Guyana</td>
<td>Inuvik</td>
<td>67752</td>
<td>Nam.porttitor@sitamet.edu</td>
</tr>
<tr>
<td>Norfolk Island</td>
<td>Sparwood</td>
<td>10899-987</td>
<td>in.consectetuer@ametmetusAliquam.net</td>
</tr>
<tr>
<td>Afghanistan</td>
<td>Sant'Urbano</td>
<td>7142</td>
<td>lectus.convallis@ornareIn.co.uk</td>
</tr>
<tr>
<td>Macao</td>
<td>Bon Accord</td>
<td>16-568</td>
<td>auctor.velit.Aliquam@consectetuerrhoncus.edu</td>
</tr>
<tr>
<td>Philippines</td>
<td>Anghiari</td>
<td>280294</td>
<td>neque.vitae@eu.org</td>
</tr>
<tr>
<td>Bangladesh</td>
<td>Falciano del Massico</td>
<td>90856</td>
<td>id@vitae.edu</td>
</tr>
<tr>
<td>Micronesia</td>
<td>Divinópolis</td>
<td>45-520</td>
<td>scelerisque.neque@vitaesemper.co.uk</td>
</tr>
<tr>
<td>Antigua and Barbuda</td>
<td>Dudzele</td>
<td>728363</td>
<td>dignissim.tempor.arcu@vulputate.net</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Joué-lès-Tours</td>
<td>958173</td>
<td>amet@eleifendnondapibus.net</td>
</tr>
<tr>
<td>Hong Kong</td>
<td>Gateshead</td>
<td>83548-761</td>
<td>fringilla.purus@enimnec.com</td>
</tr>
<tr>
<td>Iran</td>
<td>Minto</td>
<td>80622</td>
<td>adipiscing.ligula@fringillaDonec.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Whitby</td>
<td>59472</td>
<td>ante@anteNunc.org</td>
</tr>
<tr>
<td>Korea, South</td>
<td>Montpelier</td>
<td>L8 2TT</td>
<td>a@sagittisDuisgravida.org</td>
</tr>
<tr>
<td>Papua New Guinea</td>
<td>Dokkum</td>
<td>205204</td>
<td>sed.libero@convallisest.co.uk</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Maisires</td>
<td>9279</td>
<td>ultrices.posuere.cubilia@sem.org</td>
</tr>
<tr>
<td>Panama</td>
<td>Rankweil</td>
<td>30910</td>
<td>elit.fermentum@odio.org</td>
</tr>
<tr>
<td>New Zealand</td>
<td>Melsele</td>
<td>23428</td>
<td>sed.libero.Proin@nequevitaesemper.com</td>
</tr>
<tr>
<td>Cuba</td>
<td>Wolvertem</td>
<td>93687-468</td>
<td>auctor.odio@pellentesqueafacilisis.edu</td>
</tr>
<tr>
<td>Indonesia</td>
<td>Rothesay</td>
<td>919761</td>
<td>augue.scelerisque@asollicitudin.com</td>
</tr>
<tr>
<td>Japan</td>
<td>Inuvik</td>
<td>2899</td>
<td>massa.non@ligulaDonecluctus.org</td>
</tr>
<tr>
<td>Mauritius</td>
<td>Zeitz</td>
<td>603912</td>
<td>consequat@diamPellentesquehabitant.edu</td>
</tr>
<tr>
<td>Curaçao</td>
<td>Lincoln</td>
<td>11148</td>
<td>tristique.neque@Nullamlobortis.org</td>
</tr>
<tr>
<td>Swaziland</td>
<td>Newtown</td>
<td>9616</td>
<td>ipsum@sapien.ca</td>
</tr>
<tr>
<td>Brazil</td>
<td>Rodì Milici</td>
<td>861316</td>
<td>fames@variusultricesmauris.ca</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
