背景颜色属性在调整窗口大小后不起作用

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)");
        }
      }
      });
  });

//响应式站点-导航

  $(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;
}

编辑:背景颜色消失了，因为即使它是响应式的(从智能手机大小调整大小后)，它也会转到这些行：

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