Floating menu - JavaScript Made Easy

<SCRIPT language=JavaScript>
// ----------------------------------------
// Detectind user browser
// ----------------------------------------
var Nav = navigator, Ag = Nav.userAgent;
var bIE = (Ag.indexOf('MSIE') >= 0), bMacIE = false;
var bNC = (navigator.appName == "Netscape");
var bOpera = (Ag.indexOf('Opera') >= 0);
var nVer = 0, sTmp = "";
if (bIE) {
	sTmp = Ag.substring(Ag.indexOf("MSIE") + 5, Ag.length);
	nVer = Math.floor (sTmp.substring(0, sTmp.indexOf(";")));
	if (nVer >= 4 && !document.all)
		nVer = 0;
	if (Ag.indexOf("Mac") >= 0)
		bMacIE = true;
}
if (bNC)
	nVer = Math.floor (Nav.appVersion.substring (0, Nav.appVersion.indexOf (" ") ) );

bDynamic = (document.all || document.layers) ? true : false;
	
// ----------------------------------------
// Menu moving functions
// ----------------------------------------
nMenuYPos = 103;
nYDelta = 25;
nPrevScrollPos = 0;

function Spy () {
    if (bNC && nVer >= 4) {
		if (window.pageYOffset < nMenuYPos - nYDelta)
			nNeededPos = nMenuYPos;
		else	
			nNeededPos = window.pageYOffset + nYDelta;
		nCurrentPos = document.layers["floatingmenu"].top;

if (nNeededPos == nCurrentPos)
			return;

nCurrentPos += Math.round ( (nNeededPos - nCurrentPos) / 4);
		document.layers["floatingmenu"].top = nCurrentPos;
	}

if (bIE && nVer >= 4 && !bMacIE) {
		if (document.body.scrollTop < nMenuYPos - nYDelta)
			nNeededPos = nMenuYPos;
		else
			nNeededPos = document.body.scrollTop + nYDelta;
		nCurrentPos = document.all["floatingmenu"].offsetTop;

if (nNeededPos == nCurrentPos)
			return;

nDelta = (nNeededPos - nCurrentPos) / 6;
		if (nDelta > 0 && nDelta < 0.5)
			nCurrentPos += nNeededPos - nCurrentPos;
		else
			if (nDelta < 0 && nDelta >= -0.5)
				nCurrentPos --;
			else
				nCurrentPos += Math.round (nDelta);
		
		pnt = document.all ["floatingmenu"].style;
		pnt.top = nCurrentPos;
	}
}

function ScriptStart () {
    if (bNC && nVer >= 4)
		setInterval ("Spy ()", 20);
	if (bIE && nVer >= 4 && !bMacIE)
		setInterval("Spy ()", 20);
}

bScriptLoaded = true;
</SCRIPT>
<table width="770" height="215" border="0" align="center" cellpadding="0" cellspacing="0">   
<tr>     
<td width="150" align="left" valign="top" bgcolor='#FFFFFF'"> 
   <div id=floatingmenu>      
<table width="100%" border="1" align="left" cellpadding="4" cellspacing="0" bordercolor="#FFFFFF" bgcolor="#D8D8E1">        
<tr>           
<td  id=menu8 onMouseOver="menu8.bgColor='#ebebeb'" 
    onMouseOut="menu8.bgColor=''" width="151"height="27" align="left" valign="middle" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu1</a></td>
</tr>        
<tr>           
<td  id=menu1 onMouseOver="menu1.bgColor='#ebebeb'" 
    onMouseOut="menu1.bgColor=''" width="151"height="27" align="left" valign="middle" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu2</a></td>
</tr>        
<tr>           
<td  id=menu2 onMouseOver="menu2.bgColor='#ebebeb'" 
    onMouseOut="menu2.bgColor=''"height="27" align="left" valign="middle" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu3</a></td>
</tr>        
<tr>           
<td  id=menu3 onMouseOver="menu3.bgColor='#ebebeb'" 
    onMouseOut="menu3.bgColor=''"height="27" align="left" valign="middle" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu4</a></td>
</tr>        
<tr>           
<td id=menu4 onMouseOver="menu4.bgColor='#ebebeb'" 
    onMouseOut="menu4.bgColor=''"height="27" align="left" valign="middle" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu5</a></td>
</tr>        
<tr>           
<td height="27" align="left" valign="middle" id=menu5 onMouseOver="menu5.bgColor='#ebebeb' "
    onMouseOut="menu5.bgColor=''" ><a href="#"><img src="../arrow_c30.gif" width="10" height="7" border="0"> 
            Menu6</a></td>
</tr>      
</table></div>
</td>
</tr>
</table>

Other Options