你的位置:首页 > Java教程

[Java教程]可以固定的顶部的导航菜单简单实例代码


可以固定的顶部的导航菜单简单实例代码:
固定于网页顶部的导航栏效果在当下网站比较流行,所谓的固定于网页的顶部一般来说并不是一直固定于顶部,而是在开始是位于某一个位置,当下拉滚动条使其到达顶部的时候才会固定在顶部,下面通过代码实例介绍一下如何实现此效果。
代码如下:

 

<!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/