站长教程

导航栏下拉至一定高度后固定在顶部的特效代码

字号+ 作者:admin 来源:未知 2019-03-12 10:52

【前言】 总结个常见特效的实现方法,导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种,这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现 注意: dispaly:fixed;会使元素脱离文档,不占据文档空间。所以页面会有一些跳动,这时可以给

【前言】

    总结个常见特效的实现方法,导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种,这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现

   注意:dispaly:fixed;会使元素脱离文档,不占据文档空间。所以页面会有一些跳动,这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可

 

【主体】

(1)“导航栏下拉至一定高度后固定在顶部的特效”,也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码:

Js代码  
  1. <script type="text/javascript">  
  2. $(function(){  
  3. var nav=$(".nav"); //得到导航对象  
  4. var win=$(window); //得到窗口对象  
  5. var sc=$(document);//得到document文档对象。  
  6. win.scroll(function(){  
  7.   if(sc.scrollTop()>=100){  
  8.     nav.addClass("fixednav");   
  9.   }else{  
  10.    nav.removeClass("fixednav");  
  11.   }  
  12. })    
  13. })  
  14. </script>  

   将这个js放到要实现效果的页面里面去,然后我们要修改的是第三行的.nav,“nav“改成你自己页面导航栏的class;第七行的”100“为下拉到100个像素的时候触发特效,可以自行修改至合适的高度。

 

   (2)然后在css文件里面增加这个属性:

Css代码  
  1. .fixednav {  
  2.     position: fixed;  
  3.     top: 0px;  
  4.     left: 0px;  
  5.     width: 100%;  
  6.     z-index: 999;  
  7. }  

   这样就差不多完成了。

 

   【总结】大概讲下这个js的意思,判断下拉到一定高度的时候,给导航栏的div插入一个”fixednav“属性,然后给”fixednav“加上固定在顶部的参数。


1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
网友点评
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
验证码: 点击我更换图片
精彩导读