Javascript 如何合并JS媒体查询和滚动监听？

当导航位于页面顶部时，我当前正在使一个元素可见。如果页面达到

max width:900px，我希望元素被隐藏。我曾尝试使用modernizer进行JS媒体查询，但似乎无法正常工作

代码：

你检查卷轴位置的方式不对-我想你希望当当前卷轴大于而不是小于徽标顶部时徽标消失

我添加了一个
msgS
div（仅用于演示目的），它将根据菜单顶部的静态值显示当前的滚动值。我还向菜单位置添加了一个100px的模糊因子，以便在当前滚动到达该位置时在演示中更加清晰。我自己在编写代码时使用这些临时的
msg
div，然后在整理好并准备生产时删除它们

这就是在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的模糊因子，因此可以看到div消失
函数scrollListener（）{
updateScrollMsg（）；
var currcroll=$（document.scrollTop（）；
变量topOfMenu=a+fudge；
如果（gloShowLogo&currcoll500”；
console.log（medmsg）；
$（'#msgM'）.html（medmsg）；
}
.menu{背景：绿色；文本对齐：居中；}
.content{高度：200vh；背景：淡绿色；文本对齐：中间；}
.隐藏徽标{位置：固定；顶部：1vh；右侧：1vw；填充：15px；背景：粉色；z索引：2；}
#msgS{位置：固定；顶部：0；左侧：0；填充：10px；背景：小麦；z指数：2；}
#msgM{位置：固定；顶部：40px；左侧：0；填充：10px；背景：浅蓝色；z索引：2；}

菜单分区
冗长的内容分类…



100

标志
目前我的滚动功能正常，只要我添加一个媒体查询来修复断点，一切都会停止工作。我上面的演示似乎可以同时使用这两种功能。现在试一试，看看两者是否能协同工作。您可能会发现使用我在演示中使用的
#msg
div在解决此问题时给自己一双眼睛是很有帮助的。（当然，控制台日志记录也同样有效，但这更符合您的实际情况，而且（对我来说）更容易跟踪。）我发现您的解决方案与我的解决方案遇到了相同的问题。也就是说，函数之间相互干扰。我希望徽标在最大宽度为900px时消失，但如果您滚动并在页面顶部显示.menu，它将重新出现，覆盖媒体查询。我确信他们的应用程序必须是一个API。如果你想更好地了解我想做的事情，请访问CNBC网站。当你滚动时，他们的标志和导航会改变。我不想做同样的事情，但这与我正在尝试做的非常相似。在这种情况下，我会使用全局变量来确定是否要显示徽标。因此，如果屏幕宽度小于900，则检查scrollListener函数中的变量。答案用示例代码更新。
var winmed = window.matchMedia("(max-width: 700px)");
if (winmed.matches){ //do something }