Modernizr.mq 在窗口调整大小后不起作用

Question

我想在调整浏览器窗口大小后在Modernizr.mq 中运行我的代码。 这是我的代码：

jQuery(document).ready(function () {

    function callResize(){
        if (Modernizr.mq('only screen and (min-width: 800px)')==true) { 
            $(window).scroll( function() {
                var value = $(this).scrollTop();
                if ( value > 150 ){
                    $("#logo").fadeOut();
                    $(".header-container").addClass("small");
                    $(".stick-menu").css("bottom",24);
                    $(".signup").addClass("small");
                }else{
                    $("#logo").fadeIn();
                    $(".header-container").removeClass("small");
                    $(".stick-menu").css("bottom",35);
                    $(".signup").removeClass("small");
                }
            });
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'fade'
            });
        }
        if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'slide'
            });
        }
    }

    callResize();

    $(window).resize(function() {
        callResize();
    });
});

但是上面的代码不起作用。我需要重新加载我的页面才能看到 Modernizr.mq 的工作。 有什么好办法解决它吗？

Answer 1

也许尝试像这样重构所有内容，以便 callResize() 函数位于文档就绪块之外。

祝你好运！

$(function() {
    // callResize to execute after the document has loaded
    callResize();

    $(window).resize(function() {
        // callResize to execute after window resize
        callResize();
    });

});


function callResize(){
        if (Modernizr.mq('only screen and (min-width: 800px)')==true) { 
            $(window).scroll( function() {
                var value = $(this).scrollTop();
                if ( value > 150 ){
                    $("#logo").fadeOut();
                    $(".header-container").addClass("small");
                    $(".stick-menu").css("bottom",24);
                    $(".signup").addClass("small");
                }else{
                    $("#logo").fadeIn();
                    $(".header-container").removeClass("small");
                    $(".stick-menu").css("bottom",35);
                    $(".signup").removeClass("small");
                }
            });
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'fade'
            });
        }
        if (Modernizr.mq('only screen and (max-width: 759px)')==true) {
            $('#wwdTab').responsiveTabs({
                startCollapsed: 'true',
                collapsible: true,
                rotate: false,
                animation: 'slide'
            });
        }
    }