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

Представленный код позволяет 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>
HTML

CSS

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

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);
	});
});
JS

Результат

03.12.2016, обновлено 24.09.2019 8369

Поделится

Другие публикации

Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
16.02.2019 1553
В статье представлены способы зафиксировать блок при прокрутки страницы с примерами для горизонтального меню и баннера...
13.01.2017 8832
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
12.12.2018 4634
В данном примере описано как сделать интерактивную схему магазинов на основе векторной графики SVG и jQuery.
06.11.2017 6880
Мини JQuery плагин позволяет отметить или снять одним кликом чекбоксы в таблицах и отметить чекбокс по клику на сроку...
11.12.2016 1205
В данном примере описано как вывести многоуровневый список checkbox и radio button из БД с помощью PHP функций...
09.11.2017 3033