Форум

#1 (**permalink**) 09.01.2009, 21:32

В общем, есть две таблички: узкая слева и очень-очень длинная справа.
Задача такая: надо сделать, чтобы при горизонтальной прокрутке правая прокручивалась, а левая была зафиксирована, а при вертикальной прокрутке крутились обе. Помогите, пожалуйста, а то я не знаю, как такое можно сделать.
То есть, иными словами, можно ли сделать, чтобы при вертикальной прокрутке position левой таблицы из fixed временно превратить в absolute?

Ilya · #2 (**permalink**) 10.01.2009, 01:19

Я не уверен, что правильно понял вопрос.
Может быть это.

<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>

#3 (**permalink**) 10.01.2009, 21:22

К сожалению, не работает. В общем, это странно. Код на мой взгляд абсолютно правильный, за исключением:
vr1.style.left = document.body.scrollLeft;
Это совсем не нужно. Координаты той таблицы, position которой мне надо изменить, должны всё время оставаться постоянными. А вторая и так крутится. Поэтому я попробовал второй раз без этой строчки. Но ничего не изменилось...:-(

#4 (**permalink**) 10.01.2009, 21:30

А вот и файл:
http://class2-09.com/sample.html

Форум

Справочник

Discord чат

Курсы javascript