Плавающая панель.

  • Автор темы Nicolas Prof
  • Дата начала

Nicolas Prof

Guest
Плавающая панель.

Вот код:
Код:
<script language="JavaScript" type="text/javascript">
window.onscroll=moving;

function moving(){
floating.style.top=document.body.scrollTop;
}
</script>
<div name="floating" id="floating" style="z-index:1;top:0px;left:30%;position:absolute">
<table class="header" align="center" ...>
.................................................................. 
</table>
</div>
Как сделать, так чтобы она(панель), передвигалась плавно?
 

Vital_N

Новичок
ну наверное засечь насколько произошел скролл а потом вызывать move на один пиксел с задержкой на несколько милисекунд пока не достигнешь числа, на котрое прокрутил
 

Nicolas Prof

Guest
ну наверное засечь насколько произошел скролл а потом вызывать move на один пиксел с задержкой на несколько милисекунд пока не достигнешь числа, на котрое прокрутил
Вот я пока к чему пришел, но чего-то не фурычит, говорит:
'floating' is underfined

Код:
<script language="JavaScript" type="text/javascript">

window.onscroll=starting;
var oldTop=floating.style.top;
var newTop=document.body.scrollTop;
var timerID;
var step=5;

function starting(){
timerID=setInterval(moving,500);
}

function moving(){
if (newTop-oldTop>0)
	newTop=newTop-step;
else
	newTop=newTop+step;

if (newTop-oldTop<=step)
	clearInterval(timerID);
}
</script>
<div name="floating" id="floating" style="z-index:1;top:0px;left:30%;position:absolute">
<table class="header" align="center" cellspacing="2" cellpadding="2" border="0">
.......................
 

asm

Пофигист
<script language="JavaScript" type="text/javascript">
window.onload=moving;
var intervalID;
function moving(){
intervalID = window.setInterval("move()",1);
}
function move(){
if(parseInt(floating.style.top)<document.body.scrollTop){
floating.style.top=parseInt(floating.style.top)+1;
}
if(parseInt(floating.style.top)>document.body.scrollTop){
floating.style.top=parseInt(floating.style.top)-1;
}

}
</script>
<div name="floating" id="floating" style="top:0;left:30%;position:absolute">
<table class="header" align="center" ...>
..................................................................
</table>
</div>
 
Сверху