13071077710
您的当前位置: 首页 > 前端开发 > html/css > 导航栏下拉至一定高度后固定在顶部的特效

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

时间: 2017-10-26

JS片段

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

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

CSS文件

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

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

Copyright © 2013-2019 子歇    版权所有   网站地图