Прикрепить шапку таблицы

by AJIEKCEU

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="table-blue-wrp">
						<div class="table-nav">
							<div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-5">Модуль "Арендодатель"</a></div>
							<div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-6">Модуль "Стоматология"</a></div>
							<div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-7">Модуль: Транспорт</a></div>
							<div class="table-nav__item"><a class="table-nav__lnk" href="#table-ttl-8">1С обмен с сайтом</a></div>
						</div>
            <table class="table-blue-fixed">
								<tbody>
								<td>Название продукта</td>
								<td>Программная (руб)</td>
								<td>Аппаратная (руб)</td>
								</tbody>
							</table>
						<div class="table-blue-scroll">
							<table class="table-blue">
								<tbody>
									<tr>
										<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
										<td><b>1092,80</b></td>
										<td><b>730,80</b></td>
									</tr>
									<tr>
										<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
										<td><b>350,00</b></td>
										<td><b>350,00</b></td>
									</tr>
									<tr>
										<td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet magnam quibusdam magni accusamus odio error, aperiam pariatur vitae laboriosam nam dignissimos sit libero ullam provident reprehenderit sed, quaerat minima facilis!</td>
										<td><b>1092,80</b></td>
										<td><b>730,80</b></td>
									</tr>
									<tr>
										<td>Lorem ipsum dolor sit amet, consectetur...

CSS

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, address, em, img, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, nav, section, time, mark, audio, video{
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
html *{
		box-sizing: border-box;
		text-size-adjust: 100%;
		font-size: 100%;
		outline: none;
 }
html, body{
	height: 100%;
}
.table-nav{
	margin-bottom: 20px;
	margin-left: -20px;
	margin-right: -20px;
	font-size: 12px;
}

.table-nav__lnk{
	color: #414141;
	text-decoration: none;
}
.table-nav__lnk:hover{
		text-decoration: underline;
}

.table-nav__lnk_active{
	color: blue;
	text-decoration: underline;
}
.table-nav__lnk_active:hover{
		text-decoration: none;
}

.table-nav__item{
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
}
	
.table-blue-scroll{
	position: relative;
	max-height: 300px;
	margin-bottom: 20px;
	overflow: auto;
}
.table-blue-scroll table{
  width: 100%;
}

.table-blue-fixed{
	width: 100%;
	position: relative;
	border-collapse: collapse;
	border: 1px solid #f2f2f2;
	z-index: 2;
}
.table-blue-fixed	td{
  padding: 15px 25px;
  background-color: blue;
  color: #fff;
  font-weight: 600;
}

.table-blue{
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #f2f2f2;
}
.table-blue thead th{
			padding: 15px 25px;
			background-color: blue;
			color: #fff;
			font-weight: 600;
			text-align: left;
}
.table-blue	tbody th{
			background-color: #8f9ba7;
			color: #fff;
			font-family: "DinCondensed", sans-serif;
			font-size: 20px;
			font-weight: 700;
			text-align: left;
      padding: 15px 25px;
}
.table-blue	tbody	tr:nth-child(2n+1) td{
	background-color: #f2f2f2;
}
.table-blue	tbody	td{
		padding: 15px 25px;
}

JavaScript

function getWidthTd() {
  $('.table-blue-wrp').each(function () {
    var that = $(this),
        table = that.find('.table-blue'),
        thatWidth = table.width();
    table.find('tr:first-child td').each(function (index) {
      var widthTd = $(this).width();
      //that.find('.table-blue-fixed').width(thatWidth);
      that.find('.table-blue-fixed td').eq(index).width(widthTd)
    });
  });
}

$('.table-nav__lnk').on('click', function (e) {
  var that = $(this),
      parent = that.closest('.table-blue-wrp'),
      container = parent.find('.table-blue-scroll'),
      fixTableH = parent.find('.table-blue-fixed').outerHeight(),
      elementClick = that.attr("href"),
      destination = $(elementClick).offset().top;
  parent.find('.table-nav__lnk').removeClass('table-nav__lnk_active');
  that.addClass('table-nav__lnk_active');
  container.animate({
    scrollTop: destination - container.offset().top + container.scrollTop()
  });
  e.preventDefault();
});

$('.table-blue-scroll').scroll(function() {
  var scrollPos = $(this).scrollTop(),
      child = $(this).find('.table-blue-fixed');
    child.css('top', scrollPos);
});

$(window).resize(function(){
  getWidthTd();
});
$(window).resize();