Изменить 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 , так вам не подскажут

→ Ссылка