$（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（）;在正確的位置

回答

相關問題