jquery实现固定顶部导航效果(仿蘑菇街)


Posted in Javascript onMarch 21, 2013
<!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=utf-8" /> 
<title>无标题文档</title> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var headHeight=$(".header").height()+10; 
var nav=$(".nav"); 
$(window).scroll(function(){ 
if($(this).scrollTop()>headHeight){ 
nav.addClass("navFix"); 
} 
else{ 
nav.removeClass("navFix"); 
} 
}) 
}) 
</script> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
body{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不支持fixed方法 
.header{ width:1000px; height:60px; margin:0 auto; text-align:center;} 
.nav{ border:1px solid #ccc; border-radius:5px; overflow:hidden; height:30px; width:1000px; margin:10px auto; background:#fff;} 
.nav li{ float:left; padding:0 10px; height:30px; line-height:30px;} 
.nav li a{ text-decoration:none; color:#0CF;} 
.nav li a:hover{ color:#000; text-decoration:underline;} 
.nav ul{ list-style:none;} 
.navFix{ position:fixed; left:0; top:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;} //实现ie6不支持fixed方法 
.content{ width:1000px; margin:10px auto;} 
</style> 
</head> 
<body> 
<div class="header"> 
<h1>导航固定在页面顶部测试</h1> 
</div> 
<div class="nav"> 
<ul> 
<li><a href="">首页</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
<li><a href="">蓝枫前端</a></li> 
</ul> 
</div> 
<div class="content"> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p><p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
<p>11111</p> 
</div> 
</body> 
</html>
Javascript 相关文章推荐
JavaScript学习笔记之获取当前目录的实现代码
Dec 14 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
node.js中的fs.rmdir方法使用说明
Dec 16 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
iScroll.js 使用方法参考
May 16 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
Javascript动画效果(4)
Oct 11 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
微信小程序 图片宽度自适应的实现
Apr 06 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
Javascript webpack动态import
Apr 19 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
js禁止document element对象选中文本实现代码
Mar 21 #Javascript
JS获取并操作iframe中元素的方法
Mar 21 #Javascript
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 #Javascript
You might like
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php版微信公众号自定义分享内容实现方法
2016/09/22 PHP
PHP封装的验证码工具类定义与用法示例
2018/08/22 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
ff chrome和ie下全局动态定位的异同及全局高度的取法
2014/06/30 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
javascript表单验证大全
2015/08/12 Javascript
javascript跨域总结之window.name实现的跨域数据传输
2015/11/01 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
2017/06/02 jQuery
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
基于Webpack4和React hooks搭建项目的方法
2019/02/05 Javascript
vue使用el-upload上传文件及Feign服务间传递文件的方法
2019/03/15 Javascript
微信小程序动态添加和删除组件的现实
2020/02/28 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
[00:12]DAC SOLO赛卫冕冠军 VG.Paparazi灬展现SOLO技巧
2018/04/06 DOTA
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
python中set常用操作汇总
2016/06/30 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
python实现nao机器人身体躯干和腿部动作操作
2019/04/29 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
html5 worker 实例(二) 图片变换效果
2013/06/24 HTML / CSS
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
毕业生求职推荐信
2013/11/04 职场文书
出纳岗位职责模板
2013/11/27 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
工业设计毕业生自荐信
2014/04/13 职场文书
技术入股合作协议书
2014/10/07 职场文书
Redis模仿手机验证码发送的实现示例
2021/11/02 Redis
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers