Исправлен заголовок таблицы внутри прокручиваемого div
Во-первых, действительно есть несколько похожих вопросов, но они не работают в моем случае. Связанные, Другие связанные
Структура как 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
2 ответа
Добавить стиль для вашего стола
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}
$('.grid-stack').gridstack();table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
table thead tr:nth-child(1) th{
background: RED;
position: sticky;
top: 0;
z-index: 10;
}<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>Это можно сделать с помощью CSS position: fixed и скрипт jQuery. Проверьте фрагмент ниже или JSFiddle.
$('.grid-stack').gridstack();
$('thead th').each(function(index) {
$('.fixed-header th').eq(index).css('width', $(this).width());
});
$('.fixed-header-container').height($('.fixed-header').height());
$('.fixed-header-container').hide();
$('.grid-stack-item-content').scroll(function() {
var $table = $('.content-table');
if ($table.offset().top >= 0) {
$('.fixed-header-container').hide();
} else if ($table.offset().top < 0) {
$('.fixed-header-container').show();
}
});table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
.fixed-header {
position: fixed;
background-color: white;
}<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.2.6/gridstack.min.css" rel="stylesheet" />
<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 fixed-header-container" style="z-index: 1 !important;">
<table class="fixed-header">
<tr>
<th>ColA</th>
<th>ColB</th>
<th>ColC</th>
<th>ColD</th>
</tr>
</table>
</div>
<div class="grid-stack-item-content">
<div>
<h3>Title</h3>
<input type="text">
<div>
<button>Button A</button>
<button>Button B</button>
</div>
<div>
<a>Link A</a>
<a>Link B</a>
</div>
</div>
<table class="content-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>