Question

我正在尝试将一系列类应用于nav，如果window调整大小或滚动超过某个点，则会导致缩小。但是，我相信我的条件相互抵消，我不确定如何构造if-statements或者是否更好地传递变量。

这是我想要完成的事情：

如果在某组媒体查询之间调整窗口大小，请缩小导航
如果窗口在那些断点之外，并且用户滚动传递1（我在代码中仅使用一个，以便我可以立即看到它），nav将缩小，如果它们再次向上滚动，它将成为它的全尺寸

我的代码在这里：

$（document）.ready（function（）{

var logo = $('.logo');
var topLevelListItems = $('.mainNav li');
var navShrink = false;
var mQ = window.matchMedia( '(min-width: 100px) and (max-width: 770px)' );


$(window).resize(function() {

    if ( mQ.matches ) {
        $('nav').addClass('shrink');
        $('.nav-fixedWidth').addClass('shrink');
        logo.addClass('shrink');
        topLevelListItems.addClass('shrink');
        navShrink = true;
    }
    else{        
        $('nav').removeClass('shrink');
        $('.nav-fixedWidth').removeClass('shrink');
        logo.removeClass('shrink');
        topLevelListItems.removeClass('shrink');
        navShrink = false;
    }
});//end of resize function



$(window).onscroll(function(){
    if( !(mQ.match) && $(this).scrollTop >= 1 ) {
        $('nav').addClass('shrink');
        $('.nav-fixedWidth').addClass('shrink');
        logo.addClass('shrink');
        topLevelListItems.addClass('shrink');
        navShrink = true;
    } else {
        $('nav').removeClass('shrink');
        $('.nav-fixedWidth').removeClass('shrink');
        logo.removeClass('shrink');
        topLevelListItems.removeClass('shrink');
        navShrink = false;
    }

});//end of scroll function

}）; //文档结束

Answer 1

这可能只是你的onscroll函数中的拼写错误吗？

即你有：

if( !(mQ.match) && $(this).scrollTop >= 1 ) { ...

不应该是：

if( !(mQ.matches) && $(this).scrollTop >= 1 ) { ...

导航缩小滚动或调整大小

1 个答案: