Изменить header таблицы во время прокрутки
Подскажите, пожалуйста, как изменить header определенной таблицы во время ее прокрутки вниз? Имеется ввиду есть таблица :
<table class="table" id="ex4">
<thead>
<div class="header header-1" data-visible-range="0-100">
<tr>
<th class="nosort"></th>
<?php foreach ($buildings as $key => $building): ?>
<th id="closed" class="no-print" data-id="<?= $key ?>">
<?= Html::img('@web/images/horizontal-arrows.png', ['class' => 'btn arrows', 'title' => 'Переместить']); ?>
</th>
<?php endforeach; ?>
</tr>
<tr>
<th>
</th>
<?php foreach ($buildings as $key => $building): ?>
<th class="col1" data-id="<?= $key ?>">
<div class="gallery image">
<div class="ramka">
<!--<a href="<? /*= Url::toRoute(['building/view', 'id' => $building->id]) */ ?>">-->
<?= $building->getFirstPhotoHtml('165x125') ?>
<!--</a>-->
</div>
</div>
</th>
<?php endforeach; ?>
<th>
</th>
</tr>
<tr>
<th></th>
<?php foreach ($buildings as $key => $building): ?>
<th class="col1" data-id="<?= $key ?>">
<a class="hide-while-print"
href="<?= Url::toRoute(['building/view', 'id' => $building->id]) ?>"><?= $building->name ?></a>
</th>
<?php endforeach; ?>
</tr>
<tr>
<th></th>
<?php foreach ($buildings as $key => $building): ?>
<th class="no-print" data-id="<?= $key ?>">
<a href="<?= Url::toRoute(['/compare/remove', 'id' => $building->id]); ?>"
class="remove text-error">
<h5 title="Убрать из сравнения">Удалить <i class="far fa-trash-alt text-error"
title="Убрать из сравнения"></i></h5>
</a>
</th>
<?php endforeach; ?>
</tr>
</div>
<!-- header2 -->
<div class="header header-2" data-visible-range="101-500">
<tr>
<th class="nosort"></th>
<?php foreach ($buildings as $key => $building): ?>
<th id="closed" class="no-print" data-id="<?= $key ?>">
<?/*= Html::img('@web/images/horizontal-arrows.png', ['class' => 'btn arrows', 'title' => 'Переместить']); */?>
test тест
</th>
<?php endforeach; ?>
</tr>
</div>
</thead>
<tbody>
<!--много всяких данных-->
....
</tbody>
</table>
Я так понимаю должно быть 2 div и при прокрутке до определенного места, нужно скрыть первый div и показать второй. Но как это реализовать не могу сообразить, нет опыта по front. Подскажите, пожалуйста, можно если примером, что бы оптимизировать мог под себя. Спасибо заранее)
Ответы (1 шт):
Автор решения: BlackStar1991
→ Ссылка
Не понятно, что вкладывается в значение фразы изменить header определенной таблицы если вы хотите что б оно было фиксированное то можно смотреть в сторону position: sticky Вам стоит предоставить html/css , так вам не подскажут