Заголовок таблицы

В этой статье я расскажу о способе решения, который позволяет реализовать фиксированный заголовок таблицы, остающийся у верхней кромки экрана при скроллинге вверх таблиц.

Это необходимо для удобства пользователя. Такая потребность часто возникает при разработке энтерпрайз решений, когда при скроллинге вверх, совершенно необходимо чтобы заголовок таблицы оставался видимым пользователю, по аналогии с фиксацией областей в Excel, когда строки таблицы уходят при прокрутке под фиксированную область, в рассматриваемом случае – строки уходят под фиксированный заголовок таблицы.

 

Фиксированный заголовок таблицы при скроллинге HTML документа вверх.

Автор: Dmitriy Shpilchin,

                       ursus.soft@gmail.com

 

Основная идея: Смысл решения заключается в создании всплывающего заголовка таблицы, который отображается у верхней кромки экрана при возникновении события достижения таблицы заданной точки, и скрывается при скроллинге таблицы вниз. Отмечу, что что мы не будем стремиться зафиксировать хэдер основной таблицы. Вместо этого, при загрузке страницы мы будем динамически генерировать копию хэдера в скрытом блоке и отображать или скрывать данный блок с копией хэдера таблицы при наступлении нужного события. Таким образом, вся таблица в действительности будет прокручиваться вверх за пределы видимой области экрана, а поверх таблицы будет отображаться ее хэдер, создавая эффект фиксированных областей Excel.

Средства разработки: Twitter Bootstrap, JQuery, HTML, CSS.

Разработка решения: Итак, мы должны отобразить некоторые данные в табличном представлении на странице пользователя, это делается стандартными приемами.

Далее, необходимо, чтобы заголовок таблицы «залипал» у верхней кромки экрана, а строки таблицы при скроллинге вверх уходили под заголовок.

В первую очередь, создадим разметку хэдера таблицы HTML.


<table id="tbl-scores-gb" class="table bf-hidden">
    <thead>
        <tr class="col-md-12">
            <th class="col-md-2">Прогресс</th>
            <th class="col-md-3" colspan="2">&nbsp;</th>
            <th class="col-md-3" colspan="2">&nbsp;</th>
            <th class="col-md-3" colspan="2">&nbsp;</th>
            <th class="col-md-1">&nbsp;</th>
            <th class="col-md-1 bf-progress-indicator"><i class="fa fa-flag" aria-hidden="true"></i></th>
        </tr>
        <tr>
            <th class="col-md-2" rowspan="2">Реципиент</th>
            <th class="col-md-3" colspan="2">Респондент 3 уровня</th>
            <th class="col-md-3" colspan="2">Респондент 2 уровня</th>
            <th class="col-md-3" colspan="2">Респондент 1 уровня</th>
            <th class="col-md-1" rowspan="2">Итоговая оценка</th>
            <th class="col-md-1" rowspan="2">Согласование реципиента</th>
        </tr>
        <tr>
            <th class="col-md-2">ФИО</th>
            <th >Средняя оценка</th>
            <th class="col-md-2">ФИО</th>
            <th >Средняя оценка</th>
            <th class="col-md-2">ФИО</th>
            <th >Средняя оценка</th>
        </tr>
    </thead>
</table>

Над созданным хэдером объявляем якорь, по положению которого на экране мы будем отслеживать и рассчитывать положение таблицы.


<div id="table-anchor"></div>
    <table id="tbl-scores" class="table bf-hidden">
</table>

Далее, создается контейнер, в котором будет динамически генерироваться копия хэдера. Здесь важно акцентировать внимание на используемом атрибуте data-spy=»affix». Этот атрибут Tw Bootstrap позволяет определить фиксированную область. Кроме того, в данном участке кода намеренно выделен атрибут стилей, в котором мы определяем положение блока на странице.


<div id="afix-table-header-wrap" class="bf-hidden" data-spy="affix" style="margin-top: -210px; width: 1110px; z-index:999;">
    <table class="table bf-score-table">
    </table>
</div>

Разметка создана, добавляем необходимые стили.


.bf-hidden {
 display: none;
}

Теперь самая главная часть кода. Добавляем необходимую логику JavaScript.


<script>
   $(function () {
     var table_anchor = $("#table-anchor"),
                mng_afix_header = $("#afix-table-header-wrap"),
                offset = $("#table-anchor").offset(),
                w = $(window);

   $(window).on("scroll", function () {
                if ((offset.top - w.scrollTop()) < 100) {
                    mng_afix_header.show('slow');
                }
                else {
                    mng_afix_header.hide('slow');
                }
            });
   });
</script>

Обратите внимание, что мы используем JQuery. Код JS располагается внизу страницы. В этом участке кода в начале происходит объявление и инициализация необходимых переменных. Метод .offset() позволяет нам получить текущее положение элемента относительно документа. Далее, мы получаем объект окна в переменную w. При помощи метода .on() прикрепляем обработчик события скроллинга, где реализуем обычную математику, сравнивая разницу положения элемента и смещения окна с необходимым смещением, выраженным в пикселях. Когда таблица приближается к нижней границе верхнего блока навигации – во всплывающем блоке отображается копия хэдера таблицы.

Заключение: В этой статье я рассказал о способе реализации фиксированного хэдера таблицы, который отображается в виде фиксированного блока у верхней границы окна навигатора при скроллинге вверх таблицы с большим числом строк, создавая эффект фиксированных областей в Excel. Смысл решения заключается в размещении на странице скрытого блока, в котором при загрузке страницы вначале генерируется копия хэдера основной таблице, а затем, отслеживается положение таблицы на странице и при скроллинге документа блок с копией хэдера отображается или скрывается при наступлении заданного события.

Спасибо за внимание и до новых встреч,
Dmitriy Shpilchin, ursus.soft@gmail.com