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中cookie的使用详细分析
May 28 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
Aug 05 Javascript
JS简单实现动态添加HTML标记的方法示例
Apr 08 Javascript
详解vue2.0监听属性的使用心得及搭配计算属性的使用
Jul 18 Javascript
浅谈Vue.set实际上是什么
Oct 17 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
Mar 11 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
php下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
PHP 读取和修改大文件的某行内容的代码
2009/10/30 PHP
深入PHP magic quotes的详解
2013/06/17 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
JavaScript 面向对象的 私有成员和公开成员
2010/05/13 Javascript
jquery ztree实现树的搜索功能
2016/02/25 Javascript
JS获取一个未知DIV高度的方法
2016/08/09 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
WebPack基础知识详解
2017/01/16 Javascript
js实现无缝滚动图
2017/02/22 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
基于 Bootstrap Datetimepicker 联动
2017/08/03 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
vue element-ui el-date-picker限制选择时间为当天之前的代码
2019/11/07 Javascript
JavaScript实现PC端四格密码输入框功能
2020/02/19 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python设计模式之工厂方法模式实例详解
2019/01/18 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python在OpenCV里实现极坐标变换功能
2019/09/02 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
CSS3实现swap交换动画
2016/01/19 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
娇韵诗香港官网:Clarins香港
2020/08/13 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
智能电子应届生求职信
2013/11/10 职场文书
土木工程师岗位职责
2013/11/24 职场文书
京剧自荐信
2014/01/26 职场文书
环保倡议书范文
2014/05/12 职场文书
德育标兵事迹材料
2014/08/24 职场文书
南京大屠杀观后感
2015/06/02 职场文书
2016年先进班集体事迹材料
2016/02/26 职场文书
企业版Windows 11有哪些新功能? Win11适用于企业的功能介绍
2021/11/21 数码科技
python分分钟绘制精美地图海报
2022/02/15 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis