JQuery 浮动导航栏实现代码

更新时间：2009年08月27日 00:39:36 作者：

JQuery 浮动导航栏实现代码，具体的可以根据需要自己修改。

<!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 浮动导航栏</title> 
<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
/* 浮动导航栏 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; 
} 
/* 浮动导航栏 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>

您可能感兴趣的文章:

asp.net+jquery滚动滚动条加载数据的下拉控件
由于需求需要用到一个滚动滚动条加载数据的下拉列表（假如数据1000条，下拉列表开始只显示100条，当用户下拉滚到条到最底下时，再加载下一个100条，如此循环）
2010-06-06
jQuery使用each遍历循环的方法
这篇文章主要介绍了jq 用each遍历循环的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-09-09
jQuery中innerHeight()方法用法实例
这篇文章主要介绍了jQuery中innerHeight()方法用法,实例分析了innerHeight()方法的功能、定义及获取第一个匹配元素内部区域高度的使用技巧,需要的朋友可以参考下
2015-01-01
jQuery简单实现banner图片切换
本篇文章主要是对使用jQuery简单实现banner图片切换的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
Html5+jQuery+CSS制作相册小记录
这篇文章主要为大家详细介绍了Html5+jQuery+CSS制作相册小记录，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
jQuery实现简易聊天框
这篇文章主要为大家详细介绍了jQuery实现简易聊天框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
jQuery实现table中的tr上下移动并保持序号不变的实例代码
下面小编就为大家带来一篇jQuery实现table中的tr上下移动并保持序号不变的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
jquery操作对象数组元素方法详解
本文介绍了jQuery操作对象数组元素的3种方法以及一种错误方法，这里记录一下，防止下次再犯，有需要的小伙伴也可以参考下。
2014-11-11
jQuery简易图片放大特效示例代码
这篇文章主要介绍了通过jQuery实现的简易图片放大特效,需要的朋友可以参考下
2014-06-06
jQuery插件-jRating评分插件源码分析及使用方法
该插件被广泛应用于各种需要评分的页面当中，今天作为学习，把源码拿出来分析一下，顺便学习其使用方法,需要了解的朋友可以研究下
2012-12-12