Question

我的导航菜单在智能手机视图中隐藏，可以通过点击添加课程的按钮来查看＆＃34;响应＆＃34;它。在桌面视图中，始终显示导航菜单，并根据滚动更改其背景，如下所示。我的问题是，当智能手机上显示导航菜单时，我想要一个背景颜色，但是如果我在桌面视图上然后将窗口最小化到智能手机大小，则导航菜单没有背景。为了得到它，我需要刷新页面。

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

// responsive site-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;
}

编辑：背景颜色消失了，因为不知怎的，即使它的响应（从智能手机大小调整大小后）它也会消失：

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

Answer 1

如果窗口调整大小，您可以使用javascript / jquery进行检查

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

Answer 2

这是真的，您需要使用.resize()检查以下示例，前后缩放以查看背景颜色的变化，

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

jsFiddle.

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

2 个答案: