标签：
可以固定的顶部的导航菜单简单实例代码:
固定于网页顶部的导航栏效果在当下网站比较流行，所谓的固定于网页的顶部一般来说并不是一直固定于顶部，而是在开始是位于某一个位置，当下拉滚动条使其到达顶部的时候才会固定在顶部，下面通过代码实例介绍一下如何实现此效果。
代码如下:
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>导航栏固定于网页顶部代码-蚂蚁部落</title> <style type="text/css"> * { padding:0; margin:0; } .ab { width:100%; background-color:#eee; height:250px; text-align:center; line-height:250px; } .bc { width:100%; background-color:#eee; text-align:center; text-align:center; color:#fff; font-size:24px; height:2000px; } .pf { width:100%; height:50px; background-color:#C00; text-align:center; line-height:50px; color:#fff; } /*---------------------漂浮导航---------------------------*/ html { _background-image:url(about:blank); _background-attachment:fixed;/** 防止 ie6 抖动 **/ } .float { position:fixed; z-index:999999; top:0px; } * html .float { position:absolute; _top:expression(documentElement.scrollTop-0); } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> window.onscroll=function() { if($(document).scrollTop()>250) { $(".pf").addClass(‘float‘); } else { $(".pf").removeClass(‘float‘); } } </script> </head><body> <div class="ab">第一版块</div> <div class="pf">漂浮内容</div> <div class="bc"></div> </body> </html>
以上代码实现了我们的要求，可以将模拟的导航栏固定于网页的顶部，当然这里的导航栏只是一个div块而已，在实际应用中可以根据自己的项目需求进行修改，代码比较简单，这里就不多介绍了。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10796
更多内容可以参阅:http://www.softwhy.com/jquery/
标签：
原文地址：http://www.cnblogs.com/zhadanren/p/5111828.html
