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 相关文章推荐
jquery.jstree 增加节点的双击事件代码
Jul 27 Javascript
让页面上两个div中的滚动条(滑块)同步运动示例
Aug 07 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jquery选择器、属性设置用法经验总结
Sep 08 Javascript
js写的方法实现上传图片之后查看大图
Mar 05 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jQuery+HTML5加入购物车代码分享
Oct 29 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 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
动态生成gif格式的图像要注意?
2006/10/09 PHP
Ubuntu中搭建Nginx、PHP环境最简单的方法
2015/03/05 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
Use Word to Search for Files
2007/06/15 Javascript
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
解决jquery插件冲突的问题
2014/01/23 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
JavaScript学习小结(一)——JavaScript入门基础
2015/09/02 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
python 字符串格式化代码
2013/03/17 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python实现字典依据value排序
2016/02/24 Python
Python排序搜索基本算法之归并排序实例分析
2017/12/08 Python
python实现邮件发送功能
2019/08/10 Python
Python生成器next方法和send方法区别详解
2020/05/30 Python
python map比for循环快在哪
2020/09/21 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
劳资协议书范本
2014/04/23 职场文书
超越自我演讲稿
2014/05/21 职场文书
爱心捐书活动总结
2014/07/05 职场文书
快递员岗位职责
2014/09/12 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
进阶篇之linux环境下安装MySQL数据库
2022/04/09 MySQL