Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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, в других браузерах ее не видно. Подскажите в чем проблема и как этом ожно решить
Ответить с цитированием
  #2 (permalink)  
Старый 15.07.2015, 06:18
Новичок на форуме
Отправить личное сообщение для nurik_6 Посмотреть профиль Найти все сообщения от nurik_6
 
Регистрация: 15.07.2015
Сообщений: 6

Во первых, можно было бы выложить это еще это в виде архива.
Во вторых, не совсем понятно что вам нужно.
А в третьих,я прогнал у себя, и не увидел никакого "Прикрепления" h2.

"Правильно поставленный вопрос, имеет в себе 50% ответа." Народная мудрость.
Возможно вы имели ввиду параметр "fixed" у свойства "position" ?! Иначе не понятно совершенно о чем вы.
Также стоит указать что вы работаете не с чистым JS а с библиотекой JQuery.

Последний раз редактировалось nurik_6, 15.07.2015 в 06:20. Причина: добавил
Ответить с цитированием
  #3 (permalink)  
Старый 15.07.2015, 06:43
Новичок на форуме
Отправить личное сообщение для nurik_6 Посмотреть профиль Найти все сообщения от nurik_6
 
Регистрация: 15.07.2015
Сообщений: 6

Разобрался в вашей проблеме.
Сообщение от nurik_6 Посмотреть сообщение
Во первых, можно было бы выложить это еще это в виде архива.
Во вторых, не совсем понятно что вам нужно.
А в третьих,я прогнал у себя, и не увидел никакого "Прикрепления" h2.

"Правильно поставленный вопрос, имеет в себе 50% ответа." Народная мудрость.
Возможно вы имели ввиду параметр "fixed" у свойства "position" ?! Иначе не понятно совершенно о чем вы.
Также стоит указать что вы работаете не с чистым JS а с библиотекой JQuery.
Разобрался.

P.S.Не надо использовать JS там, где можно обойтись CSS.
http://stackoverflow.com/questions/1...an-html5-table
Ответить с цитированием
  #4 (permalink)  
Старый 15.07.2015, 08:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

Сообщение от nurik_6
P.S.Не надо использовать JS там, где можно обойтись CSS.
и как сделать такое http://codepen.io/jgx/pen/wiIGc
зафиксировать заголовок таблицы только с помощью css ?
Ответить с цитированием
  #5 (permalink)  
Старый 15.07.2015, 09:59
Новичок на форуме
Отправить личное сообщение для nurik_6 Посмотреть профиль Найти все сообщения от nurik_6
 
Регистрация: 15.07.2015
Сообщений: 6

Сообщение от рони Посмотреть сообщение
и как сделать такое http://codepen.io/jgx/pen/wiIGc
зафиксировать заголовок таблицы только с помощью css ?
Так там же вся реализация описана, в чем проблема ? Используется класс fixed в CSS и функция fixMe(); Я не спец в Jquery, поэтому не могу сказать детально, что происходит. Но принцип понятен. Там изначально Уже есть объект table class=blue fixed, через дебагер можно посмотреть и он скрыт, как только заголовок ушел, он включается. Вот и все. Дальше сами.
Ответить с цитированием
  #6 (permalink)  
Старый 15.07.2015, 11:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,071

nurik_6,
спасибо, но ещё раз повторю: на одном css так заголовок не зафиксировать , поэтому там и используется Jquery.
Ответить с цитированием
  #7 (permalink)  
Старый 15.07.2015, 11:34
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

Не знал что здесь в архиве можно выложить. В следующий раз так поступлю. По ссылке лучше всего подошел вариант от josef спасибо
Ответить с цитированием
  #8 (permalink)  
Старый 15.07.2015, 13:29
Интересующийся
Отправить личное сообщение для karssen Посмотреть профиль Найти все сообщения от karssen
 
Регистрация: 14.06.2013
Сообщений: 25

Буду благодарен если посмотрите эту тему. Там я приложил весь архив http://javascript.ru/forum/showthrea...757#post379757
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
scroll на нужную строку таблицы в div с фиксированной высотой. Casufi Events/DOM/Window 3 15.04.2015 11:49
событие scroll только 1 раз Hadouken Общие вопросы Javascript 6 29.12.2014 11:14
Нужна раскрывающаяся таблица 7Lexus Элементы интерфейса 26 15.08.2014 15:15
Событие scroll для элемента div со стилем (overflow-y: hidden) yavafree jQuery 2 18.06.2013 17:27
Предполагается наличие ';' в IE7- FINoM (X)HTML/CSS 5 25.08.2012 16:05