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

JavaScript中发布/订阅模式的简单实例

Nov 05 Javascript

javascript中数组array及string的方法总结

Nov 28 Javascript

angularjs的一些优化小技巧

Dec 06 Javascript

基于Echarts 3.19 制作常用的图形(非静态)

May 19 Javascript

非常实用的js验证框架实现源码附原理方法

Jun 08 Javascript

Bootstrap复选框和单选按钮美化插件(推荐)

Nov 23 Javascript

微信小程序wx.request实现后台数据交互功能分析

Nov 25 Javascript

Vue加载组件、动态加载组件的几种方式

Aug 31 Javascript

vue2配置scss的方法步骤

Jun 06 Javascript

从零撸一个pc端vue的ui组件库( 计数器组件 )

Aug 08 Javascript

three.js欧拉角和四元数的使用方法

Jul 26 Javascript

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

Jul 27 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 Opcache安装和配置方法介绍

2015/05/28 PHP

yii2 上传图片的示例代码

2018/11/02 PHP

php 的多进程操作实践案例分析

2020/02/28 PHP

自定义一个jquery插件[鼠标悬浮时候出现说明label]

2011/06/27 Javascript

细说javascript函数从函数的构成开始

2013/08/29 Javascript

JavaScript执行顺序详细介绍

2013/12/04 Javascript

jquery 提示信息显示后自动消失的具体实现

2013/12/18 Javascript

基于jQuery实现的文字按钮表单特效整理

2014/12/07 Javascript

js中setTimeout()与clearTimeout()用法实例浅析

2015/05/12 Javascript

jQuery自适应轮播图插件Swiper用法示例

2016/08/24 Javascript

Java Spring 事务回滚详解

2016/10/17 Javascript

JS实现超简单的汉字转拼音功能示例

2016/12/22 Javascript

详解使用Vue.Js结合Jquery Ajax加载数据的两种方式

2017/01/10 Javascript

详解Vue整合axios的实例代码

2017/06/21 Javascript

nodejs body-parser 解析post数据实例

2017/07/26 NodeJs

JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

2017/08/10 Javascript

three.js实现3D模型展示的示例代码

2017/12/31 Javascript

Python 学习笔记

2008/12/27 Python

python 基础学习第二弹类属性和实例属性

2012/08/27 Python

Python实现Const详解

2015/01/27 Python

Python遍历文件夹和读写文件的实现代码

2016/08/28 Python

python实现周期方波信号频谱图

2018/07/21 Python

python打开windows应用程序的实例

2019/06/28 Python

用Python实现校园通知更新提醒功能

2019/11/23 Python

python函数中将变量名转换成字符串实例

2020/05/11 Python

Python基于gevent实现文件字符串查找器

2020/08/11 Python

详解python 内存优化

2020/08/17 Python

PyCharm中关于安装第三方包的三个建议

2020/09/17 Python

利用Opencv实现图片的油画特效实例

2021/02/28 Python

美国正版电视节目和电影在线观看：Hulu

2018/05/24 全球购物

什么样的创业计划书可行性高？

2014/02/01 职场文书

小学生读书活动总结

2014/06/30 职场文书

新兵入伍心得体会

2014/09/04 职场文书

青年文明号申报材料

2014/12/23 职场文书

2016年幼儿园教研活动总结

2016/04/05 职场文书

Redis实战之Lettuce的使用技巧详解

2022/12/24 Redis