jQuery实现仿百度帖吧头部固定导航效果

前端技术 2023/09/04 JavaScript

本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果。分享给大家供大家参考。具体如下：

这里使用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 src=\"jquery-1.6.2.min.js\"language=\"javascript\" type=\"text/javascript\"></script>
<script>
$(function(){  
 $(window).scroll(function() {
  //$(\"body\").css({\"background-position\":\"center \"+$(window).scrollTop()+\"\"});
  if($(window).scrollTop()>=250){
    $(\".nav\").addClass(\"fixedNav\");
  }else{
    $(\".nav\").removeClass(\"fixedNav\");
  } 
 });
});
</script>
<style>
*{
  margin:0px;
  padding:0px;
}
div.nav{
  background:#000000;
  height:57px;
  line-height:57px;
  color:#ffffff;
  text-align:center;
  font-family:\"微软雅黑\", \"黑体\";
  font-size:30px;
}
div.fixedNav{
  position:fixed;
  top:0px;
  left:0px;
  width:100%;
  z-index:100000;
  _position:absolute;
  _top:expression(eval(document.documentElement.scrollTop));
}
</style>
</head>
<body> 
<div class=\"header\" style=\"background:#CCCC00;height:250px;\"></div>
<div class=\"nav\">
<p>导航固定</p>
</div>
<div class=\"content\" style=\"background:#0099FF; height:2000px;\"></div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10729

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案