首先，确实有多个类似的问题，但在我的情况下它们不起作用。相关,其他相关
结构就像page > div > div > stuff + table
我正在使用Gridstack.js，这是我当前的代码
$('.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>当前行为
在里面滚动div时没有什么特别的，你会首先滚动想到input, links,... 然后虽然表格
预期行为
滚动时，当标题到达顶部时div- 标题应固定在顶部div（不是页面顶部）。向后滚动时，标题应返回其正常状态。
无需检查 div 的结尾来隐藏标题。div 的结尾总是表格的结尾。
如何实现？页眉不应固定在页面顶部，而应固定在页面顶部div
注意：这也适用于 IE11