Question

我已将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上显示它？感谢。

Answer 1

默认情况下，将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>

jQuery和CSS媒体查询不匹配

1 个答案: