Представленный код позволяет c помощью jQuery зафиксировать шапку таблицы при прокрутке страницы. Скрипт поддерживает несколько таблиц на одной странице.
Из минусов – не корректно работает на мобильных.
У таблицы добавляется только класс – fixtable
.
<table class="fixtable">
<thead>
<tr>
<th>Артикул</th>
<th>Текущая МРЦ</th>
<th>Новая РРЦ</th>
</tr>
</thead>
<tbody>
<tr>
<td>2934/8C</td>
<td>20 369,00</td>
<td>14 258,30</td>
</tr>
<tr>
<td>2756/6C</td>
<td>16 276,00</td>
<td>11 393,20</td>
</tr>
<tr>
<td>2934/8C</td>
<td>20 369,00</td>
<td>14 258,30</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);
});
});
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">
Когда ссылку вписал заработало. Так что пример нечестный у вас в статьею разобрался только когда код примера посмотрел.