JQuery 浮动导航栏实现代码

【 tulaoshi.com - Web开发 】

代码如下:
!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" /
titleJQuery 浮动导航栏/title
script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script
style type="text/css"
/* 浮动导航栏 Begin */
#floatMenu
{
padding-top: 5px;
background: url(http://img.tulaoshi.com/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;
}
/* 浮动导航栏 End */
/style
/head
body
div id="floatMenu"
ul class="menu1"
lia href="#" onclick="return false;"Home/a/li
lia href="#" onclick="return false;"About Us/a/li
lia href="#" onclick="return false;"Product/a/li
lia 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