如何合并JS媒体查询和滚动收听?

Question

当我的导航位于页面顶部时，我目前正在使一个元素可见。我希望如果页面max-width: 900px;，该元素将被隐藏。我尝试使用现代化器进行 JS 媒体查询，但我似乎无法让它工作。

法典：

var a = $(".menu").offset().top;
function scrollListener(){
if($(document).scrollTop() > a)
{$('.hidden-logo').css({"opacity": "1","display": "block"});
$('.menu').css({"margin-left": "-130px"})
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
$('.menu').css({"margin-left": "0px"})
}
};
$(document).scroll(scrollListener);

Answer 1

您以错误的方式检查滚动位置 - 我认为您希望当前滚动大于徽标顶部而不是更少时徽标消失。

我添加了一个msgSdiv(仅用于演示目的)，它将根据菜单顶部的静态值向您显示当前的滚动值。我还在菜单位置添加了一个 100px 的软糖因子，以便在演示中当前滚动到达该位置时更清晰。我在制定代码时自己使用这些临时msgdiv，然后在我整理完所有代码并准备好用于生产时删除它们。

这就是在javascript中检查媒体查询所需的全部内容：

var winmed = window.matchMedia("(max-width: 700px)");
if (winmed.matches){ //do something }

这可以进入侦听器功能，就像您的滚动侦听器一样。

var gloShowLogo = true;
var a = $(".menu").offset().top;
var fudge = 100; //100px fudge factor so can SEE div disappear
function scrollListener(){
updateScrollMsg();
var currScroll = $(document).scrollTop();
var topOfMenu = a+fudge;
if( gloShowLogo && currScroll < topOfMenu ){
$('.hidden-logo').css({"opacity": "1","display": "block"});
$('.menu').css({"margin-left": "-130px"})
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
$('.menu').css({"margin-left": "0px"})
}
};
function resizeListener(){
updateMediaMsg();
var winmed = window.matchMedia("(max-width: 500px)");
if (winmed.matches){
$('.hidden-logo').css({"opacity": "1","display": "block"});
gloShowLogo = true;
} else {
$('.hidden-logo').css({"opacity": "0","display": "none"});
gloShowLogo = false;
}
}
$(window).scroll(scrollListener);
$(window).resize(resizeListener);
function updateScrollMsg(){
$('#msgS').html( $(document).scrollTop() +' // ' + $(".menu").offset().top );
}
function updateMediaMsg(){
var winmed = window.matchMedia("(max-width: 500px)");
var medmsg = (winmed.matches) ? '< 500' : '> 500';
console.log(medmsg);
$('#msgM').html(medmsg);
}

.menu{background:green;text-align:center;}
.content{height:200vh;background:palegreen;text-align:center;}
.hidden-logo{position:fixed;top:1vh;right:1vw;padding:15px; background:pink;z-index:2;}

#msgS{position:fixed;top:0;left:0;padding:10px;background:wheat;z-index:2;}
#msgM{position:fixed;top:40px;left:0;padding:10px;background:lightblue;z-index:2;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="menu">Menu Div</div>
<div class="content">Lengthy content Div..<br><br><br><br>100<br></div>
<div class="hidden-logo">LOGO</div>
<div id="msgS"></div>
<div id="msgM"></div>

更新：

抱歉，我自己对媒体查询有点倒退 - 我想您希望在屏幕尺寸<900 像素时显示徽标，如果宽度超过 900 像素则隐藏，是吗？

我添加了一个msgMdiv，以便您可以观看媒体查询的启动 - 但是为演示获得最佳宽度有点挑战。我最终将 500px 确定为可以演示的宽度(StackOverflow 在浏览器窗口调整大小时调整其 StackSnippets 容器的大小，这会在每个调整大小断点处使事情陷入混乱)