编程 Javascript

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>

- Author -

whsnow

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

由JavaScript技术实现的web小游戏（不含网游）

Jun 12 Javascript

JavaScript.Encode手动解码技巧

Jul 14 Javascript

js向上无缝滚动,网站公告效果具体代码

Nov 18 Javascript

js鼠标及对象坐标控制属性详细解析

Dec 14 Javascript

jQuery结合CSS制作漂亮的select下拉菜单

May 03 Javascript

jQuery实现下拉框选择图片功能实例

Aug 08 Javascript

Jquery 1.9.1源码分析系列（十二）之筛选操作

Dec 02 Javascript

vue双向绑定的简单实现

Dec 22 Javascript

Vue中的transition封装组件的实现方法

Aug 13 Javascript

JavaScript 浏览器对象模型BOM原理与常见用法实例分析

Dec 16 Javascript

vue页面加载时的进度条功能(实例代码)

Jan 13 Javascript

处理canvas绘制图片模糊问题

May 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