建站教学网,让你建站更便捷和轻松!QQ交流群:78085540
您当前的位置:首页 > 网页制作 > html/xhtml

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

来源:建站教学网  时间:2017-06-17 12:18:30

额,出去玩了几天很累。可是文章还是要更新的,不然百度就不喜欢我了...

 

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

 

JavaScript

 

 

 

<script type="text/javascript">  $(function(){  var nav=$(".nav"); //得到导航对象  var win=$(window); //得到窗口对象  var sc=$(document);//得到document文档对象。  win.scroll(function(){    if(sc.scrollTop()>=100){      nav.addClass("fixednav");      $(".navTmp").fadeIn();     }else{     nav.removeClass("fixednav");     $(".navTmp").fadeOut();    }  })    })  </script>                

 

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

 

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

 

CSS

 

 

 

.fixednav {      position: fixed;      top: 0px;      left: 0px;      width: 100%;      z-index: 1;  }       

 

这样就差不多完成了。

 

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

 

责任编辑:红尘摆渡人

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved 联系QQ:568245346
皖ICP备09015033号