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

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

chenmo 2020-5-24 0 256

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;
}


#固定##导航栏##顶部#

免责声明:本文仅代表作者个人观点,与本网站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
作者: chenmo 本文最后编辑于2020-5-24 09:32:38
chenmo

一个爱玩电脑,却又不沉迷游戏;喜欢网页设计,却又能力不足。喜欢网上到处灌,关注科技类新闻,寻搜有价值的网站。喜欢美剧,又喜爱电影,可以很宅,很宅,却又爱好户外骑行运动,喜欢接近大自然的心声。

作者的微博

发表评论: