Закрепляем заголовок у таблицы

Фиксированный заголовок у таблиц нужен для больших данных, когда есть вертикальный скролллинг.
Перед применением убедиться что таблица не вылезает за ширину страницы, т.е. нет горизонтального скроллинга(для фреймов).

Стиль

#header-fixed {
    position: fixed;
    top: 0px;
    display:none;
    }

Скрипт js

$(document).ready(function(){

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);
$("#header-fixed").width($("#table-1").width()); 

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }

    $("#header-fixed th").each(function(index){
    var index2 = index;
    $(this).width(function(index2){
        return $("#table-1 th").eq(index).width();
    });
});

});

});

Html код

<table id="table-1">
<thead>
<th>1</th><th>2</th><th>3</th>
</thead>
<tbody>
....
</tbody>
</table>
<table id="header-fixed"></table>

Если таблица находится внутри страницы, можно убрать заголовок на момент листания вниз/вверх. Код немножко изменится.

jQuery(document).ready(function(){

var tableOffset = jQuery("#table-1").offset().top;
    var jQueryheader = jQuery("#table-1 > thead").clone();
    var jQueryfixedHeader = jQuery("#header-fixed").append(jQueryheader);
    var bottable = jQuery("a#close").offset().top;
    jQuery("#header-fixed").width(jQuery("#table-1").width());    

    jQuery(window).bind("scroll", function() {

       var offset = jQuery(this).scrollTop();

        if (offset >= tableOffset && jQueryfixedHeader.is(":hidden")  && offset < bottable) {
            jQueryfixedHeader.show();
        } else if (offset < tableOffset || offset > bottable) {
            jQueryfixedHeader.hide();
        }
        jQuery("#header-fixed td").each(function(index) {
            jQuery(this).width(function() {
                return jQuery("#table-1 td").eq(index).width();
            });
        });
    });

 });

В HTML коде небольшое изменение, зафиксируем конец таблицы, любым элементом. Например:

</table>
<a id="close"></a>
<table id="header-fixed"></table>

Рабочий пример можно посмотреть тут.

Просмотров: 10 619

    • admin пишет:

      Первое, что приходит в голову дописать проверку, если текущая позиция скролла достигла id=»header-fixed» мы скрываем всю шапку, и нужна обратная проверка, если текущая позиция выше id=»header-fixed» мы показываем шапку.
      Пока без кода, если будет нужно сообщите, попробую написать эту проверку.

  • Андрей пишет:

    На мой взгляд лучшая реализация закрепления заголовка таблицы.
    Автору огромное спасибо.
    Простой код.
    Час искал в инете нечто подобное.
    Остановился на этом варианте.

  • Антон пишет:

    В мозилле и хроме шапка начинает фиксироваться только после прокрутки до середины таблицы :((
    Хотя в IE все ок.
    Как быть???!!! Помогите, плиз!!!

    • admin пишет:

      Проблема явно в некорректной отработке поиска высоты и смещение ее.
      Попробуйте в методе bind scroll после определения offset вывести в консоль смещение, как оно отрабатывается.
      console.log(offset);
      скролльте и смотрите значения.
      можете также вывести и другие параметры чтобы посмотреть корректно ли фиксируется значение высоты клона заголовка.

Добавить комментарий

Ваш e-mail не будет опубликован.

Можно использовать HTML теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Перед отправкой формы:
Human test by Not Captcha