Fixed Menu with scrollTop. Use CSS with position absolute to create a fixed menu which fly over your page. Using javascript with ScrollTop. Tips and Tricks for Webmasters.
Running ...

Loading the Style Sheet


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

<link rel="stylesheet" type="text/css" href="http://YOURSITE/YOUR CSS.css">



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






Find a Wine with Google CSE




Testing Fixed Menu
HOME
TIPS
MEDIA RSS
MP3
VIDEO