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 基础学习笔记之文档处理
May 29 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
May 14 Javascript
javascript中this指向详解
Apr 23 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
May 25 Javascript
JS实现title标题栏文字不间断滚动显示效果
Sep 07 Javascript
require、backbone等重构手机图片查看器
Nov 17 Javascript
从零学习node.js之文件操作(三)
Feb 21 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
Vue传参一箩筐(页面、组件)
Apr 04 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 Javascript
react中hook介绍以及使用教程
Dec 11 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模板引擎从配置文件中获取数据的方法
2015/01/22 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
PHP在线打包下载功能示例
2016/10/15 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
jQuery 1.2.x 升? 1.3.x 注意事项
2009/05/06 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
Express进阶之log4js实用入门指南
2018/02/10 Javascript
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
浅析Vue.js 中的条件渲染指令
2018/11/19 Javascript
vue axios封装及API统一管理的方法
2019/04/18 Javascript
vue+element项目中过滤输入框特殊字符小结
2019/08/07 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
在Docker上开始部署Python应用的教程
2015/04/17 Python
Python中的字符串类型基本知识学习教程
2016/02/04 Python
基于 Django 的手机管理系统实现过程详解
2019/08/16 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
基于python实现复制文件并重命名
2020/09/16 Python
瑞典度假品牌:OAS
2019/05/28 全球购物
大学生个人事迹材料
2014/01/21 职场文书
介绍信如何写
2015/01/31 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
领导新年致辞2016
2015/07/29 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
sqlserver连接错误之SQL评估期已过的问题解决
2022/03/23 SQL Server
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript