Полоса прокрутки
В общем, есть две таблички: узкая слева и очень-очень длинная справа.
Задача такая: надо сделать, чтобы при горизонтальной прокрутке правая прокручивалась, а левая была зафиксирована, а при вертикальной прокрутке крутились обе. Помогите, пожалуйста, а то я не знаю, как такое можно сделать. То есть, иными словами, можно ли сделать, чтобы при вертикальной прокрутке position левой таблицы из fixed временно превратить в absolute? |
Я не уверен, что правильно понял вопрос.
Может быть это.
<html>
<head>
<style type="text/css">
#tablica1 {
background-color: #ff0000;
height: 400px;
left: 0;
position: fixed;
top: 0;
width: 100px;
z-index: 2;
}
#tablica2 {
background-color: #0000ff;
height: 1000px;
left: 100px;
position: absolute;
top: 0;
width: 1500px;
z-index: 1;
}
</style>
<script type="text/javascript">
function fn1() {
var vr1 = document.getElementById("tablica1"); //Ссылка на объект
if(document.body.scrollTop > 0) { //Если вертикальная полоса прокрутки прокручена больше чем на 0 пикселей вниз
vr1.style.position = "absolute"; //Левая таблица становится абсолютно позиционируемой
vr1.style.top = 0; //Координата оси y для левой таблицы равна нулю
vr1.style.left = document.body.scrollLeft; //Координата оси x для левой таблицы равна тому расстоянию, насколько была прокручена горизонтальная полоса прокрутки
}
else {
vr1.style.position = "fixed"; //В противном случае левая таблица фиксирована
vr1.style.top = 0;
vr1.style.left = 0;
}
}
</script>
</head>
<body onscroll="fn1()">
<table id="tablica1"><tr><td>
</td></tr></table>
<table id="tablica2"><tr><td>
</td></tr></table>
</body>
</html>
|
...
К сожалению, не работает. В общем, это странно. Код на мой взгляд абсолютно правильный, за исключением:
vr1.style.left = document.body.scrollLeft; Это совсем не нужно. Координаты той таблицы, position которой мне надо изменить, должны всё время оставаться постоянными. А вторая и так крутится. Поэтому я попробовал второй раз без этой строчки. Но ничего не изменилось...:-( |
А вот и файл:
http://class2-09.com/sample.html |
| Часовой пояс GMT +3, время: 23:42. |