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

chen'mo
2020-05-24 / 0 评论 / 1,384 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于1970年01月01日,已超过20042天没有更新,若内容或图片失效,请留言反馈。

js要引入jquery文件:

<script type="text/javascript">
$(function(){
  var nav=$("#header"), //得到导航对象
     win=$(window), //得到窗口对象
     doc=$(document);//得到document文档对象。
     //防止页面滚动到60px以下F5刷新后导航不显示   
       if(doc.scrollTop()>=60){  
         $('#header').addClass('fixnav');
       }else{
         $('#header').removeClass('fixnav');
       }  
       //滚动到60px以下导航显示
    win.scroll(function(){
     if(doc.scrollTop()>=60){//判断滚动的高度
           $("#header").addClass('fixnav');//固定导航样式类名
          }else{
            $("#header").removeClass('fixnav');
          }
        })
})
</script>

然后在css文件里面增加这个属性(其他一些样式自行添加):

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


0
宝塔/BT面板内存占用MySQL频繁崩溃自动重启方法
« 上一篇 05-23
JavaScript脚本引用CDN失效时自动加载本地脚本
下一篇 » 05-24

评论 (0)

插入图片