Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Floating Menu Code

By Stephen Bucaro

Good Web design limits the amount of scrolling required by the user. You can totally eliminate the need to scroll by making all your webpages only one screen high. But then, to read a long article, the user has to click through many pages. A good compromise is to limit the length of your page to about three screens high. But even then, when the user scrolls to the bottom of the page, the menu goes off screen. Solution - floating menu.

You've probably come across a website where the menu stays in view by moving down or moving up the page as the user scrolls. Search the web for sample code for a floating menu and you'll find only complex, convoluted, and bloated code. In this article I show you how to create a floating menu with only a few simple lines of code.

To make a menu float, you need to put the menu links inside an html div element as shown below.

<div id="menu" style="left:4px; top:110px;">
<a href="#">Link 1</a><br />
<a href="#">Link 2</a><br />
<a href="#">Link 3</a><br />
<a href="#">Link 4</a><br />
<div>

Paste this code into the body of your webpage. Note that the inline style rules that set the left and top properties of the div. Change these numbers to set the initial location of your floating menu. Replace the pound (#) signs with your links, and replace the text "Link 1" ... with your link text. You can add as many links as you need.

Next you need a Java Script function to make the menu float. Paste the Java Script code block shown below into the <head> section of your webpage.

<script type="text/javascript">
var startY = 110;
var sy;

function floatMenu()
{
  if(document.documentElement.scrollTop)
  {
    sy = document.documentElement.scrollTop;
  }
  else
  {
    sy = document.body.scrollTop;
  }

  var temp = sy + startY;
  var newY = temp.toString() + "px";

  var elem = document.getElementById("menu");
  elem.style.top = newY;
}

window.onscroll = floatMenu;
</script>

Note that the first line in the code sets a variable named startY to the same value as the top property of the div. Change this number to the initial location of your floating menu.

Within the floatMenu function, the first code is an if/else statement that sets the variable sy to the document's scrollTop position. The reason an if/else statement is needed is because when this code is used with the Transitional DOCTYPE, the document.body property is replaced by the document.documentElement property.

After the if/else statement, the document's scrollTop position is added to the initial location startY to calculate the new position. Note that the sum is placed in a variable named temp. This is because in the next line it's formatted into a proper string which will be acceptable to assign to the divs top property.

Then the document.getElementById method is used to get a referrence to the div object, and that referrence is used to set the divs top property to the new position.

The last line in the Java Script code block assigns the floatMenu function to the window.onscroll event.