可以固定的顶部的导航菜单简单实例代码

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

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

爱程序网

Tags：[db:关键字]