就这样努力下去 2016-10-12 11:56 采纳率: 16.7%
浏览 1476

固定导航条:当鼠标不动时则导航条隐藏,滚动条向下滑时,则导航条固定在窗口

固定导航条:当鼠标不动时则导航条隐藏,滚动条向下滑时,则导航条固定在窗口

  • 写回答

2条回答 默认 最新

  • 当作看不见 2016-10-12 12:06
    关注
               //判断导航栏是否在原来位置上的标志,初始为false  
            var test = false;  
            $(window).scroll(function(){  
                    //获取当前位置到窗口顶部的高度  
                    var h_num=$(window).scrollTop();  
                    if(h_num>980){//当当前高度大于导航条到窗口顶部高度  
                       //切换导航条的类名为固定后的类名  
                       $('.price-nav').addClass('fixer');   
               //当导航条的position变成了fixed后,原来的位置会变空,需要在原位置增加个占位div  
                       if(!test){  
                            var stayPos = document.createElement("div");  
                    stayPos.id= "stayPosDiv";  
                stayPos.style.height = "38px";//导航条的高度  
                    var temp = document.getElementById("nav");  
                    temp.appendChild(stayPos);  
                    test=true;  
                }  
                    }else{  
                          //如果回到导航条原位置之前则替换回原来的类名  
                          $('.price-nav').removeClass('fixer');  
                  if(test){//移除占位div  
                       var temp = document.getElementById("nav");  
                       temp.removeChild(stayPosDiv);  
                       test = false;  
                  }  
                   }     
              });  
    
    评论

报告相同问题?

悬赏问题

  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表,拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果?
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题(有红包)
  • ¥15 请解包一个pak文件
  • ¥15 不同系统编译兼容问题
  • ¥100 三相直流充电模块对数字电源芯片在物理上它必须具备哪些功能和性能?