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

又一个小巧的图片预加载类

May 05 Javascript

11款新鲜的jQuery插件[附所有demo下载]

Jan 24 Javascript

jQuery使用动态渲染表单功能完成ajax文件下载

Jan 15 Javascript

JavaScript设置IFrame高度自适应(兼容各主流浏览器)

Jun 05 Javascript

详解AngularJS中$http缓存以及处理多个$http请求的方法

Feb 06 Javascript

利用vue实现模态框组件

Dec 19 Javascript

js实现九宫格拼图小游戏

Feb 13 Javascript

JS通过调用微信API实现微信支付功能的方法示例

Jun 29 Javascript

在vue项目中使用sass的配置方法

Mar 20 Javascript

Angularjs中date过滤器失效的问题及解决方法

Jul 06 Javascript

layer.open的自适应及居中及子页面标题的修改方法

Sep 05 Javascript

jQuery实现简单三级联动效果

Sep 05 jQuery

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