Javascript 多窗口事件-Jquery

我正在尝试编写一个函数，用于监视窗口中的一些内容：

如果窗口大于

900px

且窗口滚动通过

100

向导航添加背景颜色

如果

nav

滚动通过

100

且窗口大小调整为小于

900px

则更改BG颜色nav

我已经编写了两个函数，应该可以实现这一点。我的问题是我的函数一直工作，直到你滚动到

100

并调整屏幕大小：它们不会用第二种bg颜色应用第二个类

下面的片段。有人能提供帮助吗

$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var-nav=$（'nav'）；
如果（滚动>100）{
nav.addClass（“滚动”）；
}否则{
导航removeClass（“滚动”）；
}
});
$（窗口）。调整大小（函数（）{
var mq=window.matchMedia（'（最小宽度：100px）和（最大宽度：900px）'；
if（mq.matches&&$（'nav'）.hasClass（'scrolled'））{
$（'nav'）.removeClass（'scrolled'）；
控制台日志（“工作”）；
$（'nav'）.addClass（'scrolled two'）；
}否则{
控制台日志（“不工作”）；
$（'nav'）.removeClass（'scrolled two'）；
}
});
});
*{
填充：0；
保证金：0；
}
导航{
高度：70像素；
宽度：100%；
边框：1px实心；
过渡：所有。2轻松；
背景色：透明；
位置：固定；
排名：0；
左：0；
z指数：1000；
}
.导航固定宽度{
身高：继承；
宽度：1000px；
保证金：0自动；
边框：1px实心#ccc；
}
主要{
宽度：100%；
高度：2000px；
边框：1px实心；
背景色：#f1f1；
}
.滚动{
背景色：红色；
}
.滚动条2{
背景颜色：蓝色；
}
您的代码运行良好，如果您缓慢调整窗口大小，甚至可以使用第二种bg颜色应用第二个类。唯一的问题是这个
if（mq.matches&&$（'nav'）.hasClass（'scrolled'））
条件。正如您所提到的，
$（'nav'）.hasClass（'scrolled'）
，所以当您第一次调整大小时，它将为true，然后

$('nav').removeClass('scrolled');
console.log("Working");
$('nav').addClass('scrolledTwo');

这将对导航应用
scrolled两个
类。之后，当您将进一步调整大小时，它将永远不会通过此
if（mq.matches&&（'nav'）.hasClass（'scrolled'））
条件，直到您不将屏幕宽度调整为小于100px或大于900px并滚动，并且始终转到其他位置，您将始终看到红色。尝试删除它


$（文档）.ready（函数（）{
$（窗口）。滚动（函数（）{
var scroll=$（窗口）.scrollTop（）；
var-nav=$（'nav'）；
如果（滚动>100）{
nav.addClass（“滚动”）；
}否则{
导航removeClass（“滚动”）；
}
});
$（窗口）。调整大小（函数（）{
var mq=window.matchMedia（'（最小宽度：100px）和（最大宽度：900px）'；
if（mq.matches）{
$（'nav'）.removeClass（'scrolled'）；
控制台日志（“工作”）；
$（'nav'）.addClass（'scrolled two'）；
}否则{
控制台日志（“不工作”）；
$（'nav'）.removeClass（'scrolled two'）；
}
});
});
*{
填充：0；
保证金：0；
}
导航{
高度：70像素；
宽度：100%；
边框：1px实心；
过渡：所有。2轻松；
背景色：透明；
位置：固定；
排名：0；
左：0；
z指数：1000；
}
.导航固定宽度{
身高：继承；
宽度：1000px；
保证金：0自动；
边框：1px实心#ccc；
}
主要{
宽度：100%；
高度：2000px；
边框：1px实心；
背景色：#f1f1；
}
.滚动{
背景色：红色；
}
.滚动条2{
背景颜色：蓝色；
}

非常感谢您！我刚刚更新了它，请再看一遍，你的问候我能再问你一个问题吗？@TheodoreSteiner Yes你的最新更新刚刚为我回答了这个问题。非常感谢你！