<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>JQuery 浮動(dòng)導(dǎo)航欄</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
/* 浮動(dòng)導(dǎo)航欄 Begin */ 
#floatMenu 
{ 
padding-top: 5px; 
background: url(http://img.jb51.net/images/quickmenu.gif) no-repeat; 
border: 1px solid #dcdcdc; 
position: absolute; 
top: 250px; 
left: 5px; 
margin-left: 0px; 
width: 86px; 
} 
#floatMenu ul 
{ 
margin-left: 0px; 
background-color:White; 
list-style-type: none; 
padding:10px 

} 
#floatMenu ul li a 
{ 
display: block; 
text-decoration: none; 
color: #000; 
} 
#floatMenu ul li a:hover 
{ 
color: #fff; 
background-color: #ff8000; 
} 
#floatMenu ul.menu1 li a:hover 
{ 
border-color: #09f; 
} 
/* 浮動(dòng)導(dǎo)航欄 End */ 
</style> 
</head> 
<body> 
<div id="floatMenu"> 
<ul class="menu1"> 
<li><a href="#" onclick="return false;">Home</a></li> 
<li><a href="#" onclick="return false;">About Us</a></li> 
<li><a href="#" onclick="return false;">Product</a></li> 
<li><a href="#" onclick="return false;">Contact</a></li> 
</ul> 
</div> 
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
/><br /> 
<script type="text/javascript"> 
//<![CDATA[ 
var name = "#floatMenu"; 
var menuYloc = null; 
$(document).ready(function() { 
menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px"))) 
$(window).scroll(function() { 
offset = menuYloc + $(document).scrollTop() + "px"; 
$(name).animate({ top: offset }, { duration: 500, queue: false }); 
}); 
}); 
//]]> 
</script> 
</body> 
</html>