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

[JQuery와 수 모더 나이저 미디어 쿼리 기능에서 작동하는 이벤트의 크기를 조정할 수없는 것]의