jQuery和CSS媒体查询不匹配
jQuery和CSS媒体查询不匹配
提问于 2018-06-14 01:40:37
我将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上显示它？谢谢。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-14 05:06:43
默认情况下，将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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50843211
复制相关文章
相似问题