Moving sidebar

**walker6o9** · 04-23-2009, 11:58 AM

Is it possible for my sidebar nav to move down as the user scrolls down the webpage?

**eCat** · 04-23-2009, 03:05 PM

Personally, I find floating navbars annoying, but here ya go:

Code:

<STYLE>
#floatingmenu {
	Z-INDEX: 33; WIDTH: 150px; POSITION: absolute; TOP: 189px; HEIGHT: 120px
}
</STYLE>

<BODY text=black vLink=black aLink=black link=black bgColor=white leftMargin=0 
topMargin=0 onload="ScriptStart ();" marginwidth="0" 
marginheight="0">

<SCRIPT language=JavaScript>
// ----------------------------------------
// Detecting 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&#37;" 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>

**walker6o9** · 04-23-2009, 09:00 PM

I'm sorry I was not specific.

What I'm trying to do is make the sidebar float, but only after you've gotten to the bottom of the sidebar. So if the sidebar has a height of 500px, it only starts moving after you get to the bottom of it, and it only starts moving back up after you get back to the top of it.

Thread: Moving sidebar

Thread Tools

Display

Moving sidebar

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions