$ (Fenster) .width(); nicht korrekte Position

Question

Das ist mein Code arbeiten:

$(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*/` 

Das Problem ist, dass:

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

nicht, wenn die Fensterbreite 767px ist aber bei 784px ... warum ?? Das ist wichtiger, weil es der Punkt ist, an dem das Menü den Stil ändert. Ich habe versucht, zu verwenden, wenn ($ (window) .innerWidth()> = 767) aber das Problem weiter bestehen. Ich versuche es auch mit css @media, aber überhaupt nicht. Ich benutze Bootstrap.

Answer 1

Anstatt $(window).width() oder etwas Ähnliches zu verwenden, können Sie die Eigenschaft document.documentElement.clientWidth versuchen, die die Dokumentbreite (ohne Bildlaufleiste) zurückgibt. Zumindest funktioniert das für mich in einem ähnlichen Fall und über Browser hinweg, soweit ich das beurteilen kann.