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

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

转载于:https://www.cnblogs.com/ycg-myblog/p/9797553.html