ウィンドウがリサイズされた後、背景色の属性が機能しない

Question

スマートフォンの表示時にナビゲーションメニューが表示されず、「反応しやすい」クラスを追加するボタンをクリックすると表示されます。 デスクトップビューでは、以下のように、ナビゲーションメニューが常に表示され、スクロールに応じて背景が変更されます。 私の問題は、ナビゲーションメニューがスマートフォンに表示されているときに背景色が欲しいということです。ただし、デスクトップビューでスマートフォンサイズにウィンドウを最小化すると、ナビゲーションメニューに背景は表示されません。それを得るには私はページを更新する必要があります。

のjQuery：

$(document).ready(function(){ 

    $(window).scroll(function(){ 
     if(!$(".site-nav").hasClass("responsive")){ 
     $(".site-nav").css("top",Math.max(-10,130-$(this).scrollTop())); 

     var wn = $(window).scrollTop(); 

     if(wn > 130){ 
      $(".site-nav").css("background","rgba(225,225,225,0.7)"); 
     } 
     else{ 
      $(".site-nav").css("background","rgba(0,0,0,0)"); 
     } 
     } 
     }); 
    }); 

//応答部位-NAV

$(document).ready(function(){ 
     $(".icon").click(function(){ 
     if ($(".site-nav").hasClass("responsive")) { 
      $(".site-nav").removeClass("responsive"); 
     } else { 
      $(".site-nav").addClass("responsive"); 
     } 
     }); 
    }); 

CSS：

.site-nav.responsive { 
    display: block; 
    background-color: blue; 
    position: relative; 
    z-index: 2; 
    width: 200px; 
} 

EDIT： それは反応だ何とか場合もあるため、背景色が消えます（スマートフォンサイズからリサイズした後）、その行に移動します：

else{ 
      $(".site-nav").css("background","rgba(0,0,0,0)"); 
     } 

Answer 1

のサイズを変更する場合は、ジャバスクリプト/ jQueryを使って確認することができます

$(window).on("resize", function() { 
 
    var wd = $(window).width(); 
 
    if (wd <= 640) { 
 
    $("#menu").css("background", "blue"); 
 
    } else if (wd >= 641) { 
 
    $("#menu").css("background", "red"); 
 
    } 
 
});

#menu { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="menu"> 
 

 
</div>

jsFiddle.

Answer 2

ウィンドウでは、この例の下.resize()チェックを使用する必要が本当だ、その前を拡張し、バック背景色の変化を見るために

$(window).resize(function() { 
    //resize just happened 
});