jquery - 将媒体查询应用于 jQuery

Question

我试图在移动设备上隐藏我的 header (其中应用了一些 jQuery)。

我有一个标题，我使用 jQuery 在某个滚动点滑入和滑出。它运作良好。

默认情况下，标题显示:无，下面的 jQuery 使标题可见。

我希望如果我添加一个媒体查询(用于 iphone)来隐藏带有 !important 的 header ，它会在所有情况下隐藏 header - 但这并没有达到预期的效果。

jQuery(工作正常):

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
    $( document ).ready(function() {
        $(window).scroll(function(){
            scroll = $(window).scrollTop();
            if (scroll > 700 && scroll < 1000){
                $('#why-jquery').slideDown();
            }

            if (scroll < 700 && scroll < 1000){
                $('#why-jquery').slideUp();
            }

        });
    });
</script>

主要CSS:

#why-jquery {
    position: fixed;
    top:0;
    z-index: 99;
    width: 100%;
    height: 100px;
    display: none;
}

媒体查询:

@media screen and (max-width: 1000px) {
    #why-jquery {
        display: none !important;
    }
}

Answer 1

我遇到了你的错误。您正在编写正确的代码，但是您编写媒体查询的方式存在一个小问题。 有一个小语法问题。

So change your media query from:

@media screen and (max-width: 1000px)
    #why-jquery {
        display: none !important;
    }
}

to

@media screen and (max-width: 1000px){
    #why-jquery {
        display: none !important;
    }
}

基本上在您的媒体查询 CSS 中，{ 缺少。

还使用您的代码创建了一个虚拟示例:

$(document).ready(function() {
  $(window).scroll(function() {
    scroll = $(window).scrollTop();
    if (scroll > 700 && scroll < 1000) {
      $('#why-jquery').slideDown();
    }

    if (scroll < 700 && scroll < 1000) {
      $('#why-jquery').slideUp();
    }

  });
});

#why-jquery {
  position: fixed;
  top: 0;
  z-index: 99;
  width: 100%;
  height: 100px;
  display: none;
  background: green;
}

.container {
  height: 1600px;
  width: 100%;
  background: red;
}

@media screen and (max-width: 1000px){ #why-jquery {
  display: none !important;
}


}

<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<div class="container">
  <div id="why-jquery"></div>
</div>