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

select组合框option的捕捉实例代码

Sep 30 Javascript

浅析ajax请求json数据并用js解析(示例分析)

Jul 13 Javascript

JavaScript字符串对象substr方法入门实例（用于截取字符串）

Oct 16 Javascript

jQuery事件绑定和委托实例

Nov 25 Javascript

理解javascript中的原型和原型链

Jul 30 Javascript

js获取本机操作系统类型的两种方法

Dec 19 Javascript

js时间戳转为日期格式的方法

Dec 28 Javascript

babel的使用及安装配置教程

Feb 22 Javascript

新年快乐! javascript实现超级炫酷的3D烟花特效

Jan 30 Javascript

vue实现搜索功能

May 28 Javascript

JavaScript中的全局属性与方法深入解析

Jun 14 Javascript

原生js实现九宫格拖拽换位

Jan 26 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

Smarty安装配置方法

2008/04/10 PHP

PHP 读取和修改大文件的某行内容的代码

2009/10/30 PHP

PHP实现图片旋转效果实例代码

2014/10/01 PHP

解析WordPress中函数钩子hook的作用及基本用法

2015/12/22 PHP

PHP开发的微信现金红包功能示例

2017/06/29 PHP

一次因composer错误使用引发的问题与解决

2019/03/06 PHP

PHP levenshtein()函数用法讲解

2019/03/08 PHP

JavaScript中使用正则匹配多条，且获取每条中的分组数据

2010/11/30 Javascript

jquery自定义下拉列表示例

2014/04/25 Javascript

DOM基础教程之使用DOM

2015/01/19 Javascript

jQuery插件echarts去掉垂直网格线用法示例

2017/03/03 Javascript

jQuery实现可编辑表格并生成json结果(实例代码)

2017/07/19 jQuery

Vue v2.4中新增的$attrs及$listeners属性使用教程

2018/01/08 Javascript

JavaScript中严格判断NaN的方法

2018/02/16 Javascript

微信小程序登录换取token的教程

2018/05/31 Javascript

开发用到的js封装方法（20种）

2018/10/12 Javascript

jQuery+PHP+Ajax实现动态数字统计展示功能

2019/12/25 jQuery

用python找出那些被“标记”的照片

2017/04/20 Python

Python 12306抢火车票脚本 Python京东抢手机脚本

2018/02/06 Python

pycharm中使用anaconda部署python环境的方法步骤

2018/12/19 Python

python中的单引号双引号区别知识点总结

2019/06/23 Python

详解Python中正则匹配TAB及空格的小技巧

2019/07/26 Python

python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中

2019/08/24 Python

用python的turtle模块实现给女票画个小心心

2019/11/23 Python

python的列表List求均值和中位数实例

2020/03/03 Python

Python 面向对象静态方法、类方法、属性方法知识点小结

2020/03/09 Python

jupyter notebook 恢复误删单元格或者历史代码的实现

2020/04/17 Python

python爬取网易云音乐热歌榜实例代码

2020/08/07 Python

使用Python下载抖音各大V视频的思路详解

2021/02/06 Python

StubHub德国：购买和出售门票

2017/09/06 全球购物

面试后的感谢信范文

2014/02/01 职场文书

司机职责范本

2014/03/08 职场文书

简单的项目建议书模板

2014/03/12 职场文书

聘任书格式及范文

2015/09/21 职场文书

创业计划书之韩国烧烤店

2019/09/19 职场文书

golang 语言中错误处理机制

2021/08/30 Golang