zoukankan      html  css  js  c++  java
  • 导航栏下拉至一定高度后固定在顶部的特效

    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;
         100%;
        z-index: 999;
    }
  • 相关阅读:
    精准测试
    git 管理
    git
    代码覆盖率测试
    vue 前端视频
    jenkins
    go学习资料
    4-4 求自定类型元素的平均
    4-3 简单求和
    4-2 多项式求值
  • 原文地址:https://www.cnblogs.com/ycg-myblog/p/9797553.html
Copyright © 2011-2022 走看看