Modernizr.mq在窗口大小調整後無法工作

無論在調整瀏覽器窗口大小後，我都想在Modernizr.mq之內運行我的代碼。這裏是我的代碼：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的工作。任何想法解決它？

來源

2014-02-26 Nizamil Putra

可能重複（http://stackoverflow.com/questions/16256674/cant-seem-to-get-jquery- resize-event-to-work-on-modernizr-media-query-function） – mikedidthis

@mikedidthis我喜歡這樣，但它不起作用 –

[這個精簡版]（http://cdpn.io/jCdmy ）適用於我，這表明它可能是你在'if {...}'（而不是結構或Modernizr.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' 
      }); 
     } 
    }

的[似乎無法得到jQuery的調整事件對Modernizr的媒體查詢功能工作]

來源

2014-02-27 00:29:38

不幸的是，調整窗口大小後，沒有發生任何事情 –

Modernizr.mq在窗口大小調整後無法工作

回答

相關問題