为何jQuery和css媒体查询不匹配?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (120)

我在一个元素中插入了一个CSS代码,以便只在手机上显示它:

@media only screen and (max-width: 780px) { #footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
z-index: 10;
}}

到目前为止工作得很好。然后我添加了这个jQuery,以便在滚动文件中显示它。

jQuery(window).scroll(function() {

if (jQuery(this).scrollTop()>100)
{
jQuery('#footer').fadeIn();
}
else
{
jQuery('#footer').fadeOut();
}
});

但是现在,这个元素也显示在PC上。我需要在JS代码中插入什么才能告诉他不要在PC上显示它?谢谢。

提问于
用户回答回答于

display: none默认情况下应用于你的页脚。然后,在if检查窗口宽度的语句中包装检查滚动位置的代码。

jQuery(window).scroll(function() {
  if (jQuery(window).width() <= 780) {
    if (jQuery(this).scrollTop() > 100)
    {
      jQuery('#footer').fadeIn();
    }
    else
    {
      jQuery('#footer').fadeOut();
    }
  }
});
body {
  background: #eee;
  height: 300vh;
}

#footer {
  display: none;
  background: #dfd;
}

@media only screen and (max-width: 780px) {
  #footer {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1rem;
    z-index: 10;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<footer id="footer">This is my footer.</footer>

扫码关注云+社区

领取腾讯云代金券