Question

我正在尝试将我的标题（应用了一些jQuery）隐藏在移动设备上。

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

默认情况下，标题显示为：none，下面的jQuery使标题可见。

我希望如果我添加一个媒体查询（用于iphone）来隐藏标题！重要的是它会在所有情况下隐藏标题 - 但这没有达到预期的效果。

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

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

因此请更改您的媒体查询：

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

到

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

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

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

＆＃13;

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

＆＃13;

#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;
}


}

＆＃13;

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

＆＃13;

将媒体查询应用于jQuery

1 个答案: