调整设备宽度后删除/更改jquery代码

问题描述：

你好我有出现（如果滚动100+）和消失（如果滚动100-）导航栏。它有效，但有一个问题。调整设备宽度后删除/更改jquery代码

$(window).scroll(function(){ 
      if($(document).scrollTop() >= 100) { 
       $("#navbar1").animate({"opacity":"1"}, "fast"); 
       $("#main").animate({paddingTop: "70px"}, "fast"); 
      }else { 
       $("#navbar1").animate({"opacity":"0"}, "fast"); 
       $("#main").animate({paddingTop: "20px"}, "fast"); 
      } 
     });

像手机或平板电脑的小型设备需要花费太多的时间出现和消失（如您已在500像素，但导航栏haven't尚未出现），所以我想用这样的：

@media screen and (max-width: 780 px) { 
    #navbar1 { 
     opacity:1; 
    } 
    #main { 
     padding-top:70px; 
    } 
}

不过还是有同样的问题，我想有导航栏总是出现，如果最大宽度：780像素...有没有办法做到这一点？谢谢你的回答。

你的问题是略显混乱，因为它代表你可能想用图片或其他东西澄清 – William

JavaScript/jQuery代码将覆盖您定义的任何CSS样式。你可以修改'$（document）.scrollTop（）> = 100）'到'$（document）.scrollTop（）> = 100 ||之类的东西。 $（window）.width（） arcyqwerty

@arcyqwerty谢谢！你给我灌输了一个想法。我只是改变了我的jquery，只有在min width = 780和scrolltop = 100的情况下出现和消失，否则如果设备的最大宽度是780，那么通过加载页面。我刚刚创建了我想要的东西，无法解释它对不起。感谢你们。 :) – Hugo

答

这是怎么回事？

$(window).scroll(function(){ 
     if ($(window).width() > 780)){ 
       if($(document).scrollTop() >= 100) { 
        $("#navbar1").animate({"opacity":"1"}, "fast"); 
        $("#main").animate({paddingTop: "70px"}, "fast"); 
       }else { 
        $("#navbar1").animate({"opacity":"0"}, "fast"); 
        $("#main").animate({paddingTop: "20px"}, "fast"); 
       } 
     } 
    });

所以，基本上是相同的，但制作的动画，只有当屏幕上有超过780px，就休息了，你可以用正常的CSS样式绘制它

是的！我已经知道了，但是还是谢谢你！ :) – Hugo

调整设备宽度后删除/更改jquery代码

相关推荐