编程 Javascript

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 相关文章推荐

js prototype 格式化数字 By shawl.qiu

Apr 02 Javascript

IE8中使用javascript动态加载CSS的解决方法

Jun 17 Javascript

js编写贪吃蛇的小游戏

Aug 24 Javascript

jquery实现ajax提交表单信息的简单方法(推荐)

Aug 24 Javascript

ajax 提交数据到后台jsp页面及页面跳转问题

Jan 19 Javascript

Angular.js基础学习之初始化

Mar 10 Javascript

Javascript实现从小到大的数组转换成二叉搜索树

Jun 13 Javascript

使用Angular CLI从蓝本生成代码详解

Mar 24 Javascript

微信小程序日期选择器实例代码

Jul 18 Javascript

深入理解JS中Number()，parseInt()，parseFloat()三者比较

Aug 24 Javascript

微信小程序关键字变色实现代码实例

Dec 13 Javascript

JavaScript实现捕获鼠标坐标

Apr 12 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将fileterms函数返回的结果变成可读的形式

2011/04/21 PHP

使用php统计字符串中中英文字符的个数

2013/06/23 PHP

PHP根据传入参数合并多个JS和CSS文件的简单实现

2014/06/13 PHP

PHP把数字转成人民币大写的函数分享

2014/06/30 PHP

PHP传值到不同页面的三种常见方式及php和html之间传值问题

2015/11/19 PHP

功能强大的php分页函数

2016/07/20 PHP

PHP数据库处理封装类实例

2016/12/24 PHP

JQuery 遮罩层实现(mask)实现代码

2010/01/09 Javascript

JQuery live函数

2010/12/24 Javascript

JS验证控制输入中英文字节长度(input、textarea等)具体实例

2013/06/21 Javascript

浅谈Javascript 执行顺序

2013/12/18 Javascript

Javascript中的Callback方法浅析

2015/03/15 Javascript

Bootstrap框架结合jQuery仿百度换肤功能实例解析

2016/09/17 Javascript

JS简单验证上传文件类型的方法

2017/04/17 Javascript

微信小程序网络封装(简单高效)

2018/08/06 Javascript

JS实现的检验身份证格式并输出出生日期，年龄，性别，出生地示例

2019/05/17 Javascript

vue 实现在同一界面实现组件的动态添加和删除功能

2020/06/16 Javascript

[00:14]护身甲盾

2019/03/06 DOTA

Python中dictionary items()系列函数的用法实例

2014/08/21 Python

Python协程的用法和例子详解

2017/09/09 Python

TF-IDF算法解析与Python实现方法详解

2017/11/16 Python

python使用xslt提取网页数据的方法

2018/02/23 Python

python版本单链表实现代码

2018/09/28 Python

python多进程读图提取特征存npy

2019/05/21 Python

python保留小数位的三种实现方法

2020/01/07 Python

python中什么是面向对象

2020/06/11 Python

使用bandit对目标python代码进行安全函数扫描的案例分析

2021/01/27 Python

HTML5之SVG 2D入门4—笔画与填充

2013/01/30 HTML / CSS

周仰杰(JIMMY CHOO)英国官方网站：闻名世界的鞋子品牌

2018/10/28 全球购物

大学秋游活动方案

2014/02/11 职场文书

见习报告格式范文

2014/11/08 职场文书

团员个人总结

2015/02/26 职场文书

交通安全月活动总结

2015/05/08 职场文书

2016民族团结先进个人事迹材料

2016/02/26 职场文书

从np.random.normal()到正态分布的拟合操作

2021/06/02 Python

python格式化字符串

2022/04/20 Python