$（window）.width（）;在正确的位置

不行那是我的代码：

$(window).on("load scroll resize", function() 
{ 
    if($(window).width() >= 767) 
    { 
     $(".boxlogo").css("display","block"); 
     $(".nav > li").css("margin-top","95px");` 

     var s = $(window).scrollTop(); 
     if(s > 1) 
     { 
      $(".boxlogo").css("width","140px"); 
      $(".navbar-color").css("background-color","#fff"); 
      $(".dropdown-menu > li > a") .css("color","#000"); 
      $(".dropdown > a ").css("color","#000"); 
      $(".nav > li > a").css("color","#000");      
      $(".dropdown-menu > li > a") .css("text-shadow","2px 2px #fff"); 
      $(".dropdown > a ").css("text-shadow","1px 1px #fff"); 
      $(".nav > li > a").css("text-shadow","1px 1px #fff"); 
      $(".nav > li").css("margin-top","62px"); 
      $(".dropdown-menu").css("background-color","#fff"); 
     } 
     else 
     { 
      $(".boxlogo").css("width","200px"); 
      $(".navbar-color").css("background-color","transparent");     
      $(".dropdown-menu > li > a") .css("color","#fff"); 
      $(".dropdown > a ").css("color","#fff"); 
      $(".nav > li > a").css("color","#fff"); 
      $(".dropdown-menu > li > a") .css("text-shadow","1px 1px #000"); 
      $(".dropdown > a ").css("text-shadow","1px 1px #000"); 
      $(".nav > li > a").css("text-shadow","1px 1px #000"); 
      $(".dropdown-menu").css("background-color","transparent"); 
      $(".nav > li").css("margin-top","96px"); 
     } 
    }//if windows 
    else { 
     $(".boxlogo").css("display","none"); 
     $(".nav > li").css("margin-top","5px"); 
    } 
});//scroll resize*/`

的问题是：

当窗口宽度为767px，但在784px

$(".boxlogo").css("display","block"); 
$(".nav > li").css("margin-top","95px");

不行......为什么？这更重要，因为是菜单改变风格的时候。我试图使用if（$（window）.innerWidth（）> = 767），但问题仍然存在。我也尝试用css @media做到这一点，但不工作。我正在使用bootstrap。

来源

2016-11-04 Desga

尝试先添加所需相关属性的打印输出。 – FDavidov

而不是使用$(window).width()或类似的东西，你可以尝试document.documentElement.clientWidth属性返回文档宽度（没有滚动条）。就我所能说的，至少这对我来说也适用于类似的情况和浏览器。

来源

2016-11-05 08:36:15 Flyer53

阅读[this SO answer]（http://stackoverflow.com/a/7205786/1891677）可以很好地解释'document.clientWidth'什么时候返回。 –

此外，他们正试图在CSS中匹配媒体查询。您的代码仅适用于OP期望在没有滚动条的页面上显示，并且当滚动条出现时，如果当前浏览器以桌面模式（使用实心侧边栏）呈现页面，则代码将不正确。 –

@AndreiGheorghiu'document.clientWidth'返回undefined，因为它不存在。我谈到了'document.documentElement.clientWidth'。无论如何，我没有说这是每个人最完美的解决方案，但它值得一试。在我的用例中，它在IE11，EDGE，FF，Chrome和Brave中非常完美......有或没有可见滚动条。所以我没有看到不尝试的理由。 – Flyer53

$（window）.width（）;在正确的位置

回答

相关问题