@JonaFeb 04.2005 — #[font=trebuchet ms]You can do this purely with CSS. However, because Internet Explorer does not understand CSS 2, JavaScript must be employed for it. Try the following.[/font]
[b]The Script. Goes in HEAD tags.[/b] <i> </i><script type="text/javascript"><!-- function floatMenu(){ if(!document.getElementById) return; var menu = document.getElementById('menu'); menu.style.top = ((!document.all)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop:document.body.scrollTop)+"px"; } window.onscroll = floatMenu; //--></script> <style type="text/css"><!-- #menu { position:fixed; top: 0px; left:0px; } --></style>
[b]The HTML. Goes in BODY tags.[/b] <i> </i><div id="menu"> <ul> <li>Menu item</li> <li>Menu item</li> <li>Menu item</li> </ul> </div> [font=trebuchet ms][/font]
@JPnycFeb 08.2005 — #What he gave you there was the css for making the menu fixed, and the script which corrects IE's CSS shortcomings. HE didn't give you the menu code, but that you can get all over the web.
@DonnaLPDec 31.2005 — #I tried the code myself. It works, but my problem is that I need the menu to stay below the Navagation menu. Right now when you go to the page the menu is in a "fixed" spot. But then it jumps to the top of the page.
How can I get it to stay were I want it to then scroll down/up with the page?
I have tried different code from different js forums and tried to change the code that is there now, but I'm missing something. But I believe it is the "menu.style.top" that I need to change, but I don't know how.
@JonaJan 01.2006 — #<i> </i><script type="text/javascript"><!-- function floatMenu(){ if(!document.getElementById) return; var menu = document.getElementById('menu'); var distY = ((!document.all)?(window.pageYOffset):(document.documentElement)?document.documentElement.scrollTop: document.body.scrollTop); if(distY < 600){ // 600 would be the height of your header area, you may need to change this distY = 600; // this is also the height of your header and will keep the menu here instead of at 0 } menu.style.top = distY+"px"; } window.onscroll = floatMenu; //--></script> <style type="text/css"><!-- #menu { position:fixed; top: 0px; left:0px; } --></style>