JQuery 浮动导航栏实现代码


Posted in Javascript onAugust 27, 2009
<!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.3water.com/jslib/jquery/jquery-1.3.2.min.js"></script> 
<style type="text/css"> 
/* 浮动导航栏 Begin */ 
#floatMenu 
{ 
padding-top: 5px; 
background: url(http://img.3water.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"> 
<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>
Javascript 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
javascript关于继承解析
May 10 Javascript
Node.js 文件夹目录结构创建实例代码
Jul 08 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
Sep 21 Javascript
利用n 升级工具升级Node.js版本及在mac环境下的坑
Feb 15 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
jQuery length 和 size()区别总结
Apr 26 jQuery
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
详解微信小程序实现仿微信聊天界面(各种细节处理)
Feb 17 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
jQuery ui1.7 dialog只能弹出一次问题
Aug 27 #Javascript
JSON 客户端和服务器端的格式转换
Aug 27 #Javascript
动态表格Table类的实现
Aug 26 #Javascript
javascript 函数调用规则
Aug 26 #Javascript
JSON 入门指南 想了解json的朋友可以看下
Aug 26 #Javascript
javascript 继承实现方法
Aug 26 #Javascript
JS去除字符串的空格增强版(可以去除中间的空格)
Aug 26 #Javascript
You might like
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
Flex通过JS获取客户端IP和计算机名的实例代码
2013/11/21 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JQuery中DOM加载与事件执行实例分析
2015/06/13 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
jQuery插件zTree实现的多选树效果示例
2017/03/08 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
jQuery validata插件实现方法
2017/06/25 jQuery
JavaScript实现各种排序的代码详解
2017/08/28 Javascript
vue数字类型过滤器的示例代码
2017/09/07 Javascript
手把手教你vue-cli单页到多页应用的方法
2018/05/31 Javascript
php中and 和 &amp;&amp;出坑指南
2018/07/13 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
vue props default Array或是Object的正确写法说明
2020/07/30 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
js轮播图之旋转木马效果
2020/10/13 Javascript
[43:47]完美世界DOTA2联赛PWL S3 LBZS vs Phoenix 第一场 12.09
2020/12/11 DOTA
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
windows系统下Python环境搭建教程
2017/03/28 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
使用Python读取大文件的方法
2018/02/11 Python
wxPython的安装与使用教程
2018/08/31 Python
Python符号计算之实现函数极限的方法
2019/07/15 Python
python中的Elasticsearch操作汇总
2019/10/30 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
django form和field具体方法和属性说明
2020/07/09 Python
使用HTML5的链接预取功能(link prefetching)给网站提速
2012/12/13 HTML / CSS
假日旅行社实习自我鉴定
2013/09/24 职场文书
2015年高中班主任工作总结
2015/04/30 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
导游词之永济鹳雀楼
2020/01/16 职场文书
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
Android实现图片九宫格
2022/06/28 Java/Android