Newsgroup: it.comp.lang.javascript
Titolo: Menu che scorre ma 'scattoso'

Ciao a tutti, ho un piccolo problema con un bello scriptino trovato in
rete. Permette di avere un div, nel mio caso contenente un menu di
navigazione locale, che scorre insieme alla pagina. Ora, il problema è
che il movimento è brusco. Vorrei riuscire a rendere il movimento più
fluido e lento, come accade su 
poste.it
Credo che tutto stia nel else pos += 30; ma un po' di prove hanno avuto
scarso risultato ;-)
Grazie in anticipo
<HTML>
<HEAD>
<TITLE>JavaScript - Sticky menu</TITLE>
<LINK REL="stylesheet" HREF="js.css">
<SCRIPT SRC="js.js"></SCRIPT>
<STYLE TYPE="text/css">
<!--
#menu,#comp{
	position: absolute;
	top: 100;
	left: 10%;
	font: 12px verdana,arial,helvetica;
	color: #ffffff;
	background: #000000;
	padding: 10px;
	border: none;
	z-index: 5;
}
#comp {
	position: fixed;
	left: 50px;
	visibility: hidden;
	z-index: 2;
}
/* :visited necessary because the menu is used for internal links
	and Explorer sees them as already visited */
div#menu a,div#menu a:visited {color: #ffffff;}
-->
</STYLE>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
var menu;
var theTop = 100;
var old = theTop;
function init()
{
	menu = new getObj('menu');
	comp = new getObj('comp');
	movemenu();
}
function movemenu()
{
	if (window.innerHeight)
	{
		  pos = window.pageYOffset
	}
	else if (document.documentElement &&
document.documentElement.scrollTop)
	{
		pos = document.documentElement.scrollTop
	}
	else if (document.body)
	{
		  pos = document.body.scrollTop
	}
	if (pos < theTop) pos = theTop;
	else pos += 30;
	if (pos == old)
	{
		menu.style.top = pos;
	}
	old = pos;
	temp = setTimeout('movemenu()',250);
}
function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}
var comp;
function showhide(val)
{
	comp.style.visibility = val;
}
// -->
</SCRIPT></HEAD>
<BODY onload="init()" onUnload="fixedmenu()">
FAKE CONTENT...
<DIV ID="menu">
Sticky menu<BR>
<A HREF="#top">Top</A><BR>
<A HREF="#fixed">position: fixed</A><BR>
<A HREF="#script">The script</A><BR>
<A HREF="#expl">Explanation</A><BR>
<A HREF="#mm">movemenu()</A><BR>
</DIV>
<DIV ID="comp">
This is the comparision menu with position: fixed.<BR>
</body>
</html>
-- 
	enkidu75

 }
Prova a ridurre il tempo di intervallo del "refresh". L'applicazione sarà più esigente in termini di CPU dell'utente ma forse una
via di mezzo accettabile la puoi trovare.
Alex.

APB wrote:

Grazie, ma anche riducendo il tempo di refresh, ovvero ogni quanto la
funzione controlla la posizione del menu, l'adeguamento è comunque
scattoso. Credo che al posto di
	else pos += 30;
ci voglia una specie di ciclo che gli fa raggiungere la posizione più
lentamente, ad esempio 10px alla volta ogni decimo di secondo, ma non
mi riesce.
Ciao
-- 
	enkidu75

 ha scritto nel messaggio news:bpledd$1p1f70$1...@ID-27316.news.uni-berlin.de...

 Magari inizia con valori "insane" tipo 5 pixel ogni 20 millisecondi :D
Ciao, grazie di nuovo.
Ecco cosa ho fatto: ho scritto una funzione che sposta di 5px alla
volta il menu e gli ho dato il setTimeout a 20 millesimi, ma non va
bene, perche al primo scroll IE mi da un errore javascript...
<script language="JavaScript" type="text/javascript">
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
var menu;
var theTop = 180;
var old = theTop;
function init()
{
	menu = new getObj('menu');
	//comp = new getObj('comp');
	movemenu();
}
function movemenu()
{
	if (window.innerHeight)
	{
		  pos = window.pageYOffset
	}
	else if (document.documentElement &&
document.documentElement.scrollTop)
	{
		pos = document.documentElement.scrollTop
	}
	else if (document.body)
	{
		  pos = document.body.scrollTop
	}
 
 
	function mia() {
	pos = pos+5;
	temp = setTimeout('mia()',20);
	}
 
	if (pos < theTop) pos = theTop;
	else mia(); 
	// pos = pos+20;
	if (pos == old)
	{
		menu.style.top = pos;
	}
	old = pos;
	temp = setTimeout('movemenu()',200);
}
function getObj(name)
{
  if (document.getElementById)
  {
  	this.obj = document.getElementById(name);
	this.style = document.getElementById(name).style;
  }
  else if (document.all)
  {
	this.obj = document.all[name];
	this.style = document.all[name].style;
  }
  else if (document.layers)
  {
   	this.obj = document.layers[name];
   	this.style = document.layers[name];
  }
}
</script>