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

admin

【前言】

    总结个常见特效的实现方法，导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过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("fixnav");
   
9.   }else{
   
10.    nav.removeClass("fixnav");
    
11.   }
    
12. })  
    
13. })
    
14. </script>

复制代码

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

   （2）然后在css文件里面增加这个属性：

Css代码  

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

复制代码

   这样就差不多完成了。

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

进进

学习了，这就去试试

兔子王

这个源码好喜欢，谢谢分享

灌水大王

感谢您的无私精神...

老菜鸟

感觉不错,谢谢分享

大龙虾

不错不错 支持下

星夜幽灵

越来越喜欢这个论坛了，解决了好大的问题

星空亮

我表示压力很大，如果我是女的肯定嫁个你

苍龙

抢楼了，前排第一次啊

笨鸟先飞

学习了！！！！