0
まず、実際には複数の同様の質問がありますが、私の場合は機能しません。 Related、Other relatedスクロール可能なdiv内の固定テーブルヘッダー
構造は、私がGridstack.jsを使用しています
page > div > div > stuff + tableのようなもので、ここに私の現在のコード
$('.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>現在の行動
です特別なものは何もありませんdivの内側にスクロールしながらヘッダーがの上部に当たったとき、スクロールしながら、あなたが最初のスクロールがinput、links、...その後、テーブルかかわら
期待される動作
を考えますがdiv - ヘッダーはdivの上部に固定する必要があります（ページの上部ではありません）。スクロールバックすると、ヘッダーは通常の状態に戻ります。
ヘッダーを非表示にするには、divの最後を確認する必要はありません。 divの最後は常にテーブルの最後になります。
これはどのように達成できますか？ヘッダーには、ページの最上部に固定されるべきではなく、div
のトップ注：これはまた、IE11のために働く必要があり
それが働いてから近くにあります。問題は、IE11上で動作するはずです。何か別の選択肢はありますか？ – Weedoze
@Weedoze、位置絶対値のみ||固定+ js –
どのようにそれを行うためのヒント？ – Weedoze