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"> 11111 11111 1111111111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 11111 </div> </body> </html>

　　推荐阅读

　　js新闻滚动 js如何实现新闻滚动效果

具体代码如下：复制代码代码如下: <!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">>>详细阅读

本文标题：jquery实现固定顶部导航效果(仿蘑菇街)

地址：http://www.17bianji.com/kaifa2/JS/22597.html

1/2 1