Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Position fixed, но динамический по оси ОХ (https://javascript.ru/forum/dom-window/41343-position-fixed-no-dinamicheskijj-po-osi-okh.html)

tvixa 09.09.2013 14:19

Position fixed, но динамический по оси ОХ
 
Всем здравствуйте. Недавно получила задание следующего характера: существует таблица:список мастеров сверху, а по вертикали время записи. Верхний блок(мастера) должен быть фиксированным по оси ОУ, но при прокрутке по горизонтали верхний блок должен стать динамическим,чтобы фамилии мастеров соответствовали их значениям по оси ОУ.

Гробовщик 09.09.2013 14:56

Не совсем понял вопрос, но если понял правильно то так:
echo '<div style="overflow:auto; width:200%;">'; 
echo '<div style="position:absolute; width:200%;">'; 
echo '<table border="1" width="200%">';
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo '<td>Иванов</td>';
echo '<td>Петров</td>';
echo '<td>Сидоров</td>';
echo'</tr>';
echo '</table></div><br><br><br><br><br><br><br>';
echo '<div style="width:100%; height:68%;">
<table id="table" width="100%">';

for ($i=0; $i<100; $i++){
echo '<tr style="background: #FFFACD;">'; 
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo '<td>Время</td>';
echo'</tr>';
}
echo'</div>';
?>

Оформление корявое но работает как положено

tvixa 09.09.2013 15:11

Гробовщик,не совсем. Блок №2 должен располагаться вертикально, а блок с фамилиями горизонтально.прилагаю скрин
когда я прокручиваю вправо верхняя панель с фамилиями остается на месте, хотя ячейки относятся не к ним. Хотела оформить решение через яваскрипт, условием if, но ничего не получается:-((

Гробовщик 09.09.2013 15:21

Ой извиняюсь, неправильно нихрена( Вот так лучше
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru" dir="ltr">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	</head>
<body>
<style>
#header {
    width: 150%;
    display: block;
    position: fixed;
    background: #fff;
    overflow: hidden;
    z-index: 1;
}
#header div {
    display: table-cell;
    padding: 15px;
    border: 1px solid #ccc;
    border-collapse: collapse;
    font-weight: bold;
}
table {
    width: 150%;
}
thead {
    visibility: hidden;
}
td, th {
    border: 1px solid #ccc;
    border-collapse: collapse;
    padding: 15px;
}
</style>

<script src='http://code.jquery.com/jquery-1.7.2.js' type='text/javascript'></script>  
<script language="javascript">
jQuery(document).ready(function($){
    var $table = $('table'),
 $header = $('#header'),
    $thead = $('thead');
    $thead.find('th').each(function(){
        var $newdiv = $('<div />', {
            style: 'width:'+ $(this).width()+'px'
            
        });
        $newdiv.text($(this).text());
        $header.append($newdiv);
    });
    
     var $viewport = $(window); 

    $viewport.scroll(function(){
     $header.css({
         left: -$(this).scrollLeft()
     });

    });
});
</script>

<div id="header"></div>
<table>
<thead>
<tr>
<th>Время</th>
<th>Иванов</th>
<th>Петров</th> 
<th>Сидоров</th> 
</tr>
</thead>


<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
<tr>
<td>Время</td>
<td>Время</td> 
<td>Время</td> 
</tr>
</table>
</body></html>

tvixa 09.09.2013 15:39

спасибо большое)) чуть чуть доработать и само то))):)


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