Тема: Событие scroll. Не цепляется строка таблицы
Показать сообщение отдельно
  #1 (permalink)  
Старый 13.07.2015, 17:28
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen 		 
Регистрация: 14.06.2013
Сообщений: 25

Событие scroll. Не цепляется строка таблицы
Добрый день. Буду очень благодарен если кто то объяснит в чем проблема. Есть ХТМЛ код таблички 
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Табло аэропорта</title>
	<link href="styles/style.css" rel="stylesheet" type="text/css">
	<script src="js/jquery-2.1.4.min.js"></script>
	<script src="js/myScript.js"></script>
</head>

<body>
	
	<div id="wrapper">
		<form method='get'>
			<p><label>Вылет<label>
				<input type="checkbox" value="1" name="departure" id="departure">
			</p>
			<p><label>Прилет<label>
				<input type="checkbox" value="2" name="landing" id="landing">
			</p>
		</form>
		<div class="container">
		<h2>Расписание рейсов аэропорта</h2>
		<table>	
			<thead>
				<tr>
				   <td>Тип рейса</td>
				   <td>Номер рейса</td>
				   <td>Авиакампания</td>
				   <td>Логотип</td>
				   <td>Тип воздушного судна</td>
				   <td>Аэропорт назначения</td>
				   <td>Плановое время вылета</td>
				   <td>Плановое время прилета</td>
				   <td>Статус рейса</td>
				   <td>Примечания</td>
				</tr>
			<thead>
			<tbody> 	
				<tr>
				   <td><img src="images/air.png" alt="Вылет" title="Вылет" width="20px"></td>
				   <td>SU 2462</td>
				   <td>Аэрофлот </td>
				   <td><img src="images/aeroflot.jpg" alt="Аэрофлот" title="Аэрофлот" width="40px"></td>
				   <td>Airbus А321</td>
				   <td>Париж</td>
				   <td>11:45</td>
				   <td>14:05</td>
				   <td>Вылетел</td>
				   <td>-</td>
				</tr>
				<tr>
				   <td><img src="images/landing.png" alt="Приземление" title="Приземление" width="20px"></td>
				   <td>DL 1011</td>
				   <td>Уральские авиалинии</td>
				   <td><img src="images/ural.jpg" alt="Уральские авиалинии" title="Уральские авиалинии" width="40px"></td>
				   <td>Boeing 777-300</td>
				   <td>Шереметьево</td>
				   <td>11:25</td>
				   <td>23:10</td>
				   <td>Отменен</td>
				   <td>Погодные условия</td>
				</tr>
				<tr>
				   <td><img src="images/landing.png" alt="Приземление" title="Приземление" width="20px"></td>
				   <td>SU 1255</td>
				   <td>S7</td>
				   <td><img src="images/s7.jpg" alt="S7" title="S7" width="40px"></td>
				   <td>Airbus А320</td>
				   <td>Шереметьево</td>
				   <td>9:45</td>
				   <td>13:05</td>
				   <td>Приземлился</td>
				   <td>-</td>
				</tr>
				<tr>
				   <td><img src="images/air.png" alt="Вылет" title="Вылет" width="20px"></td>
				   <td>SU 2563</td>
				   <td>Аэрофлот</td>
				   <td><img src="images/aeroflot.jpg" alt="Аэрофлот" title="Аэрофлот" width="40px"></td>
				   <td>Airbus А321</td>
				   <td>Симферополь</td>
				   <td>12:45</td>
				   <td>15:05</td>
				   <td>Задержан до 15:35</td>
				   <td>Технические неполадки</td>
				</tr>
				<tr>
				   <td><img src="images/landing.png" alt="Приземление" title="Приземление" width="20px"></td>
				   <td>SU 2355</td>
				   <td>Аэрофлот </td>
				   <td><img src="images/aeroflot.jpg" alt="Аэрофлот" title="Аэрофлот" width="40px"></td>
				   <td>Airbus А330</td>
				   <td>Шереметьево</td>
				   <td>12:15</td>
				   <td>14:55</td>
				   <td>По расписанию</td>
				   <td>-</td>
				</tr>
				<tr>
				   <td><img src="images/air.png" alt="Вылет" title="Вылет" width="20px"></td>
				   <td>SU 2722</td>
				   <td>Аэрофлот </td>
				   <td><img src="images/aeroflot.jpg" alt="Аэрофлот" title="Аэрофлот" width="40px"></td>
				   <td>Airbus А321</td>
				   <td>Венеция</td>
				   <td>11:45</td>
				   <td>14:55</td>
				   <td>Вылетел</td>
				   <td>-</td>
				</tr>
				<tr>
				   <td><img src="images/landing.png" alt="Приземление" title="Приземление" width="20px"></td>
				   <td>DL 1016</td>
				   <td>Уральские авиалинии</td>
				   <td><img src="images/ural.jpg" alt="Уральские авиалинии" title="Уральские авиалинии" width="40px"></td>
				   <td>Boeing 777-300</td>
				   <td>Шереметьево</td>
				   <td>11:25</td>
				   <td>23:10</td>
				   <td>Отменен</td>
				   <td>Погодные условия</td>
				</tr>
				<tr>
				   <td><img src="images/landing.png" alt="Приземление" title="Приземление" width="20px"></td>
				   <td>SU 1255</td>
				   <td>S7</td>
				   <td><img src="images/s7.jpg" alt="S7" title="S7" width="40px"></td>
				   <td>Airbus А320</td>
				   <td>Шереметьево</td>
				   <td>9:45</td>
				   <td>13:05</td>
				   <td>Приземлился</td>
				   <td>-</td>
				</tr>
				
			</tbody>
		</table>
		</div>
	</div>
	
</body>
</html>

Стили к нему
Код:
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/*Index*/
#wrapper{
	max-width: 1200px;
	min-width: 600px;
	overflow:hidden;
	margin:0 auto;
}
.container{
	position:relative;
}
.container h2{
	outline:1px dashed #fff;
	background-color:#33CCCC;
	position:relative;
	top:0;
	text-align:center;
	color:#fff;
	padding: 15px 0;
	margin:0 0 -8px 0;
	font-size: 1.5em;
	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;	
	z-index:2;
}
form {
	padding: 10px 0;
	overflow:hidden;
	margin:0 15px 0 0;
}
form p{
	margin:0 15px 0 0;
	background-color:#FF7400;
	display:inline-block;
	padding: 5px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}
form p label{
	color:#fff;
}
table{
	width:100%;
	margin:5px 0 0 0;
	position:relative;
}
table thead{
	position:relative;
}
table td{
	text-align:center;
	color:#fff;
	padding: 10px 5px;
	font-size: 0.9em;
	font-family: Georgia, "Times New Roman", Times, serif;
}
table tbody tr td:nth-child(odd){
	background-color:#006363;
}
table tbody tr td:nth-child(even){
	background-color:#1D7373;
}
table thead tr td:nth-child(odd){
	background-color:#006363;
}
table thead tr td:nth-child(even){
	background-color:#1D7373;
}
table thead tr:first-of-type{
	position:relative;
	top:0;
	z-index:2;
}
table thead td{
	text-align:center;
	color:#fff;
	padding: 10px 5px;
	font-size: 0.9em;
	font-family: Georgia, "Times New Roman", Times, serif;
}
table tbody tr td.width800odd{
	background-color:#1D7373;
}
table tbody tr td.width800even{
	background-color:#006363;
}
table tbody tr td.highlight{
	background-color:#009999;
}
table thead tr td.width800odd{
	background-color:#1D7373;
}
table thead tr td.width800even{
	background-color:#006363;
}
table thead tr td.highlight{
	background-color:#009999;
}
и Сам код javascript 
$(document).ready(function(){
$(window).scroll(function(){
		var scroll = $(window).scrollTop(); 
		var first = $('table tr:first');
		if(scroll > 50){
			$('.container h2').css({'top':$(document).scrollTop() - 50});			
			first.css({'top':$(document).scrollTop() - 50});
		}
		else{
			$('.container h2').offset({top:49});	//вернули элементу изначальный top
			first.offset({top:100});
		}
	});
}


Так вот заголовок h2 отлично прикрепляется к верху страницы и остается там при прокрутке во всех браузерах. А первая строка таблицы ведет себя таким же образом только в firefox, в других браузерах ее не видно. Подскажите в чем проблема и как этом ожно решить
Ответить с цитированием