Use scrollTop to display a fixed menu. Tips and Tricks for webmasters
 

Loading the Style Sheet


  • Write this javascript in the first editable section of the page :

<script language="Javascript" type="text/javascript">
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href =
'http://YOURSITE.googlepages.com/style_menu.css';
cssNode.media = 'screen, print';
cssNode.title = 'style sheet for fixed menu';
document.getElementsByTagName("head")
[0].appendChild(cssNode);
</script>



The CSS


  • We use position absolute :


#smenu
{
position: absolute;
top: 30px;
left: 85%;
font: 12px verdana,arial,helvetica,sans-serif;
color: #fff;
background: #000;
padding: 10px;
border: none;
z-index: 5;
}


div#smenu a,div#smenu a:visited {color: #fff;}



The script


  • We use scrollTop


var menu;
var theTop = 30;
var old = theTop;

window.onload = function ()
{
menu = new getObj('smenu');
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 + 'px';}
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];
}

}



The HTML


  • A div block with id smenu contains the menu


<div id="smenu">
...
</div>



More Informations





One Day - One Label - One Wine



Add this gadget to Google







Testing Fixed Menu
HOME
TIPS
MEDIA RSS
MP3
VIDEO