我如何强制加载一个只在我的Mediaquery中显示JQuery效果的类？

Question

我对导航有影响，而滚动浏览第一个窗口（WeekdayName(Weekday(objFile.DateCreated, vbUseSystemDayOfWeek), , vbUseSystemDayOfWeek) ）后导航会关闭。但是第一个导航只能在鼠标悬停时进行交互，这对移动用户或平板电脑用户不起作用;我只是想让第二个导航显示让我们说宽度低于900px;并有点删除第一个导航。

第二个导航仅显示在Jquery / JS中。使用if else语句; （如果窗口滚动低于100vh高度/ 500px的小提琴，一个名为full的类，这是第二个导航）被添加到导航。

height: 100vh;/or 500px in the fiddle

我制作了一个Fiddle here来直观地解释问题。

我如何解决这个问题，任何想法？

大大帮助和努力!!

Answer 1

这个技术上没有回答你的问题 - 因为你使用媒体查询请求了布局更改，但我确实找到了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);

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

随时提出任何问题。