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


Posted in Javascript onOctober 22, 2014

jquery实现导航固定顶部的效果,仿蘑菇街的,感觉还不错,需要的朋友可以参考下

<!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 相关文章推荐
js常见表单应用技巧
Jan 09 Javascript
javascript通过class来获取元素实现代码
Feb 20 Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 Javascript
js闭包实例汇总
Nov 09 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
Vue性能优化的方法
Jul 30 Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 #Javascript
用简洁的jQuery方法toggleClass实现隔行换色
Oct 22 #Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 #Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 #Javascript
一个不错的js html页面倒计时可精确到秒
Oct 22 #Javascript
js实现select跳转功能代码
Oct 22 #Javascript
You might like
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP类和对象相关系统函数与运算符小结
2016/09/28 PHP
完美解决thinkphp唯一索引重复时出错的问题
2017/03/31 PHP
PHP封装的分页类与简单用法示例
2019/02/25 PHP
Express.JS使用详解
2014/07/17 Javascript
jQuery+ajax实现无刷新级联菜单示例
2015/05/21 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
vue中页面跳转拦截器的实现方法
2017/08/23 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
js读取本地文件的实例
2017/12/22 Javascript
从零开始搭建vue移动端项目到上线的步骤
2018/10/15 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
Python随机生成均匀分布在单位圆内的点代码示例
2017/11/13 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
Python实现直播推流效果
2019/11/26 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
如何基于Python + requests实现发送HTTP请求
2020/01/13 Python
Python Numpy库常见用法入门教程
2020/01/16 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
Python 删除List元素的三种方法remove、pop、del
2020/11/16 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
求职信内容考虑哪几点
2013/10/05 职场文书
食堂个人先进事迹
2014/01/22 职场文书
学生打架检讨书大全
2014/01/23 职场文书
会务接待方案
2014/02/27 职场文书
网页美工求职信范文
2014/04/17 职场文书
小学优秀教师材料
2014/12/15 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
求职简历自我评价2015
2015/03/10 职场文书
简单且有用的Python数据分析和机器学习代码
2021/07/02 Python
设置IIS Express并发数
2022/07/07 Servers