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

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

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

Комментарии 3

Дмитрий Сергеев Дмитрий Сергеев
19 января 2022 в 16:20
Не работает. Ну точнее прокрутка работает, но ширина таблицы ровно равна ширине столбцов в сумме, а ширина столбца по ширине значения. Т.е. растянуть на страницу не получается и задать фиксированные размеры столбцов тоже.
Дмитрий Сергеев Дмитрий Сергеев
19 января 2022 в 16:42
Ясно. Стиль берется не из CSS, со ссылки
<link rel="stylesheet" href="https://snipp.ru/cdn/bootstrap/4.3/bootstrap.min.css">
Когда ссылку вписал заработало. Так что пример нечестный у вас в статьею разобрался только когда код примера посмотрел.
Дмитрий Сергеев Дмитрий Сергеев
19 января 2022 в 16:54
Скачал этот файл локально, тоже работает. Но там внутри такого класса нет, а еще куча ссылок. В общем чувствую без интернета работать не будет, а мне именно без интернета надо, для домашнего сайта на ESP8266.

, чтобы добавить комментарий.

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

Contenteditable – текстовый редактор
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
43156
+34
Видео c YouTube в качестве фона сайта
Пара примеров как сделать блок с адаптивным видео в качестве фона на основе видеоплеера HTML5, YouTube и JQuery.
16129
+1
Как вместить большие таблицы на страницы сайта
Чтобы вместить большую таблицу, достаточно обернуть её в и добавить несколько CSS стилей, чтобы появился горизонтальный...
26908
+10
Блок, фиксированный при прокрутке
В статье представлены способы зафиксировать блок при прокрутки страницы с примерами для горизонтального меню и баннера...
31029
0
Появление элемента в области просмотра браузера
Отследить появление блока при скроллинге можно с помощью события onscroll, вычисляя его положение методами jquery...
46955
+14
Модальное окно на затемненном фоне
Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет...
67783
+23