Javascript 如何强制加载在Mediaquery中仅显示JQuery效果的类？

我对我的导航有影响，而navigition在滚动第一个窗口（

高度：100vh；/或小提琴中的500px

）后关闭。但第一个导航系统只能在鼠标悬停时进行交互，这对移动用户或平板电脑用户不起作用；我只想在900px以下的宽度上显示第二个导航；然后移除第一个导航

第二个nav仅在Jquery/JS中显示。使用if-else语句；（如果窗口在小提琴中滚动低于100vh高度/500px，则称为full的类，即第二个导航）将添加到导航中

if ($window.scrollTop() > navShiftBreakpoint) {
            $navContainer.addClass( 'full' );}
     //full = the second nav & //navShiftBreakpoint = 500px

我做了一个，直观的解释问题

我怎样才能解决这个问题，有什么想法吗

非常感谢您的帮助和努力

从技术上讲，这并不能回答您的问题-因为您使用媒体查询请求更改布局，但我确实找到了jQuery/JS解决方案

如果您在加载时检查屏幕是否小于900px，并且这是真的，那么它将设置导航栏，就像您已经使用所创建的类滚动一样。如果这不是真的，那么它将在500px之后调用原始的滚动函数来更改布局

(function() {

var $window = $( window ),
    $navContainer = $( '.nav-container' ),
        navShiftBreakpoint = 500; // px, when to change nav layout

if ($(window).width() < 900) {
    $navContainer.addClass( 'full' );
} else {
    $window.scroll(function() {
    if ($window.scrollTop() > navShiftBreakpoint) {
        $navContainer.addClass( 'full' );
            } else {
            $navContainer.removeClass( 'full' );
        };
        });
}
})(jQuery);

（函数（）{
变量$window=$（window），
$navContainer=$（'.nav container'），
navShiftBreakpoint=500；//px，何时更改导航布局
如果（$（窗口）.width（）<900）{
$navContainer.addClass（'full'）；
}否则{
$window.scroll（函数（）{
if（$window.scrollTop（）>navShiftBreakpoint）{
$navContainer.addClass（'full'）；
}否则{
$navContainer.removeClass（'full'）；
};
});
}
})（jQuery）；

---

编辑：根据OP的要求，这里有一个更新，以确保当屏幕大小改变时，版面“更新”到正确的样式，就像标准媒体查询一样。这涉及到一些调整大小的事件，但不是解释它，

---

---

请随便问任何问题。

嘿，你知道我如何解决这个问题，这样我就可以确认它是否有效，但是如果我在屏幕上打开它（它的宽度为1400px），然后将其缩小到

宽度为450px

，第二个导航应该在哪里，它就不起作用了；只有当我刷新它时，它才会强制出现，你知道我如何“生活”更新它吗？@ZanicL3这应该和在调整大小时更新它一样简单。我会查看一下并更新我的原始帖子。好的，酷，更新后请告诉我，谢谢effort@ZanicL3更新了帖子。如果你有任何其他问题，我在这里-很乐意帮助！非常感谢你把它修好了！！我真的很感激你的每一次努力！