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 相关文章推荐
jQuery 选择器理解
Mar 16 Javascript
javascript 闭包
Sep 15 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
jQuery实现可编辑的表格实例讲解(2)
Sep 17 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
Nov 16 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
解决vue keep-alive 数据更新的问题
Sep 21 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 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
smarty中js的调用方法示例
2014/10/27 PHP
PHP实现即时输出、实时输出内容方法
2015/05/27 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
php使用自带dom扩展进行元素匹配的原理解析
2020/05/29 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
js showModalDialog参数的使用详解
2014/01/07 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
Bootstrap 粘页脚效果
2016/03/28 Javascript
实例解析jQuery中如何取消后续执行内容
2016/12/01 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
jQuery实现扑克正反面翻牌效果
2017/03/10 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
javascript实现Emrips反质数枚举的示例代码
2017/12/06 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
JS数组扁平化、去重、排序操作实例详解
2020/02/24 Javascript
Python3操作SQL Server数据库(实例讲解)
2017/10/21 Python
Python3实现的判断回文链表算法示例
2019/03/08 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
Python占用的内存优化教程
2019/07/28 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python如何将将模块分割成多个文件
2020/08/04 Python
Manjaro、pip、conda更换国内源的方法
2020/11/17 Python
python 动态渲染 mysql 配置文件的示例
2020/11/20 Python
CSS3.0实现霓虹灯按钮动画特效的示例代码
2021/01/12 HTML / CSS
群众路线教育党员自我剖析材料
2014/10/06 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
小学教育见习总结
2015/06/23 职场文书
家属联谊会致辞
2015/07/31 职场文书
改进工作作风心得体会
2016/01/23 职场文书
护士医德医风心得体会
2016/01/25 职场文书