www.webdeveloper.com
Results 1 to 3 of 3

Thread: Moving sidebar

  1. #1
    Join Date
    Jul 2008
    Posts
    38

    Moving sidebar

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

  2. #2
    Join Date
    Oct 2005
    Posts
    177
    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>

  3. #3
    Join Date
    Jul 2008
    Posts
    38
    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 Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles