Javascript 调整窗口大小后Modernizer.mq不起作用

调整浏览器窗口大小后，我想在

modernizer.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();
    });
});

但是上面的代码不起作用。我需要重新加载我的页面才能看到

modernizer.mq

工作。

---

有没有办法解决这个问题？

也许可以尝试像这样重新构造所有内容，以便callResize（）函数位于docuement ready块之外

祝你好运

$(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'
            });
        }
    }

---

不幸的是，调整窗口大小后没有发生任何事情@MikeDidt的可能重复项我喜欢这样做，但它对我不起作用，这表明如果{…}（而不是结构或modernizer.mq）不起作用，则可能是您在

中所做的事情。请尝试在调整大小后调用您的代码。看这里：