Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   Событие scroll. Не цепляется строка таблицы (https://javascript.ru/forum/css-html/56984-sobytie-scroll-ne-ceplyaetsya-stroka-tablicy.html)

karssen 13.07.2015 17:28
Событие 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, в других браузерах ее не видно. Подскажите в чем проблема и как этом ожно решить

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

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

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

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

P.S.Не надо использовать JS там, где можно обойтись CSS.
http://stackoverflow.com/questions/1...an-html5-table

рони 15.07.2015 08:12
Цитата:
Сообщение от nurik_6
P.S.Не надо использовать JS там, где можно обойтись CSS.
и как сделать такое http://codepen.io/jgx/pen/wiIGc
зафиксировать заголовок таблицы только с помощью css ?

nurik_6 15.07.2015 09:59
Цитата:
Сообщение от рони (Сообщение 379696)
и как сделать такое http://codepen.io/jgx/pen/wiIGc
зафиксировать заголовок таблицы только с помощью css ?
Так там же вся реализация описана, в чем проблема ? Используется класс fixed в CSS и функция fixMe(); Я не спец в Jquery, поэтому не могу сказать детально, что происходит. Но принцип понятен. Там изначально Уже есть объект table class=blue fixed, через дебагер можно посмотреть и он скрыт, как только заголовок ушел, он включается. Вот и все. Дальше сами.

рони 15.07.2015 11:03
nurik_6,
спасибо, но ещё раз повторю: на одном css так заголовок не зафиксировать , поэтому там и используется Jquery.

karssen 15.07.2015 11:34
Не знал что здесь в архиве можно выложить. В следующий раз так поступлю. По ссылке лучше всего подошел вариант от josef спасибо

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


Часовой пояс GMT +3, время: 23:00.