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

Question

我对我的导航有影响，而导航在滚动第一个 window (height: 100vh;/or 500px in the fiddle) 后关闭。但是第一个导航只能在鼠标悬停时进行交互，这对移动用户或平板电脑用户不起作用；我只想让第二个导航显示在宽度低于 900 像素的情况下；有点删除第一个导航。

第二个导航仅从 Jquery/JS 开始显示。使用 if else 语句； （如果 window 在 fiddle 中滚动到 100vh height/500px 以下，一个名为 full 的 class，这是第二个导航）被添加到导航中。

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

我做了一个Fiddle here，直观的说明问题

我该如何解决这个问题，有什么想法吗？

非常感谢帮助和努力！！

Answer 1

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

如果您在屏幕小于 900 像素的情况下检查加载，这是真的，它将设置导航栏，就像您已经使用您制作的 class 滚动一样。如果这不是真的，那么它会在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);

---

编辑： 根据 OP 的要求，这里有一个更新以确保布局 'updates' 为正确的样式当屏幕尺寸改变时，就像标准的媒体查询一样。这涉及一些调整大小的事件，而不是解释它，view the updated JSFiddle here.

---

有任何问题欢迎随时提问。