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

也许尝试重构这样的一切，以便调用Resize（）函数在文档就绪块之外。

祝你好运！

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

在调整窗口大小后，Modernizr.mq无法正常工作

1 个答案: