夏日博客

A-A+

基于jQuery导航栏顶部跟随特效代码

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

顶部跟随效果就是我们现在很多网站导航菜单会使用到的一些功能了，下面夏日博客小编来为大家介绍一下此问题的解决办法，希望例子能帮助到各位同学哦。用jQ实现很简单哒,我这里有一个方法.

第一步、先在head标签里引用jQuery，已经引用了的就不用重复啦

  1. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.0/jquery.js" />  

第二步、然后修改导航栏的div,将导航栏div的id赋值为id="nav"，如果原来木有id就加上去,比如如下代码L

  1. <div class="nav" >导航栏的内容</div>  
  2.    
  3. //改成  
  4.   
  5. <div class="nav" id="nav">导航栏的内容</div>  

当然，为了防止冲突，如果导航栏div已经有id了，可以在外面再套一层id="nav"的div

第三步、接着在head标签里再加上如下代码:

  1. <script type="text/javascript" >    
  2.     $(document).ready(function(){           
  3.         $(window).scroll(function(){    
  4.              var t = document.body.scrollTop||document.documentElement.scrollTop;    
  5.              if(t>XXXXX){    
  6.                 $("#nav").css({    
  7.                     "position":"fixed",    
  8.                     "top"     :"0px",    
  9.                     "left"    :"0px"    
  10.                 });    
  11.              }else{     
  12.                 $("#nav").css({    
  13.                     "position":"",    
  14.                     "top"     :"",    
  15.                     "left"    :""    
  16.                 });    
  17.              }    
  18.         });    
  19.     });    
  20. </script>  

第四步、接着计算导航栏底部距离网页顶部的距离,比如我的结构是如下代码:

  1. <body>    
  2. <header>  
  3. <div class="head" style="height:100px;"></div>    
  4. <div id="nav" style="height:100px;"></div>  
  5. </header>    
  6. <div class="content" ></div>    
  7. <footer></footer>  
  8. </body>  

那么导航栏底部距离网页顶部的距离就是head层的高+导航栏的高=200px

最后把第三步所提供的代码中的第五行中的XXXXX改为导航栏底部距离网页顶部的距离

像上面举的例子，那么就把XXXXX改为200就行了（不用加单位）

标签：

给我留言