JS/jQuery

Фиксированная шапка таблицы при прокрутке

Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.

Из минусов – не корректно работает на мобильных.

Пример:

Артикул Текущая МРЦ Новая РРЦ
2934/8C 20 369,00 14 258,30
2756/6C 16 276,00 11 393,20
2934/8C 20 369,00 14 258,30
2756/6C 16 276,00 11 393,20
2934/8C 20 369,00 14 258,30
2756/6C 16 276,00 11 393,20
2934/8C 20 369,00 14 258,30
2756/6C 16 276,00 11 393,20

HTML

У таблицы добавляется только класс – fixtable.

<table class="table table-bordered fixtable">
    <thead>
        <tr>
            <th><code class="html">Артикул</code></th>
            <th><code class="html">Текущая МРЦ</code></th>
            <th><code class="html">Новая РРЦ</code></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><code class="html">2934/8C</code></td>
            <td><code class="html">20&nbsp;369,00</code></td>
            <td><code class="html">14&nbsp;258,30</code></td>
        </tr>
        ...
        <tr>
            <td><code class="html">2756/6C</code></td>
            <td><code class="html">16&nbsp;276,00</code></td>
            <td><code class="html">11&nbsp;393,20</code></td>
        </tr>
    </tbody>
</table>
        

CSS

.fixtable-fixed {
    position: fixed;
    top: 0;
    z-index: 101;
    background-color: #FCF8E4;
    border-bottom: 1px solid #ddd;
}

JS

function FixTable(table) {
    var inst = this;
    this.table  = table;

    $('tr > th',$(this.table)).each(function(index) {
        var div_fixed = $('<div/>').addClass('fixtable-fixed');
        var div_relat = $('<div/>').addClass('fixtable-relative');
        div_fixed.html($(this).html());
        div_relat.html($(this).html());
        $(this).html('').append(div_fixed).append(div_relat);
        $(div_fixed).hide();
    });

    this.StyleColumns();
    this.FixColumns();

    $(window).scroll(function(){
        inst.FixColumns()
    }).resize(function(){
        inst.StyleColumns()
    });
}

FixTable.prototype.StyleColumns = function() {
    var inst = this;
    $('tr > th', $(this.table)).each(function(){
        var div_relat = $('div.fixtable-relative', $(this));
        var th = $(div_relat).parent('th');
        $('div.fixtable-fixed', $(this)).css({
            'width': $(th).outerWidth(true) - parseInt($(th).css('border-left-width')) + 'px',
            'height': $(th).outerHeight(true) + 'px',
            'left': $(div_relat).offset().left - parseInt($(th).css('padding-left')) + 'px',
            'padding-top': $(div_relat).offset().top - $(inst.table).offset().top + 'px',
            'padding-left': $(th).css('padding-left'),
            'padding-right': $(th).css('padding-right')
        });
    });
}

FixTable.prototype.FixColumns = function() {
    var inst = this;
    var show = false;
    var s_top = $(window).scrollTop();
    var h_top = $(inst.table).offset().top;

    if (s_top < (h_top + $(inst.table).height() - $(inst.table).find('.fixtable-fixed').outerHeight()) && s_top > h_top) {
        show = true;
    }

    $('tr > th > div.fixtable-fixed', $(this.table)).each(function(){
        show ? $(this).show() : $(this).hide()
    });
}

$(document).ready(function(){
    $('.fixtable').each(function() {
        new FixTable(this);
    });
});
03 декабря 2016