jQuery 브라우저의 크기를 조정할 때 미디어 쿼리처럼 작동합니까?

Question

나는 잠시 동안이 문제로 어려움을 겪어 왔습니다. 기본적으로 뷰포트의 너비가 790px보다 작지 않으면 div (#memberrevealwrapper)가 특정 높이입니다. 그런 다음 다른 높이가됩니다.

이제 #memberrevealwrapper는 jQuery를 사용하여 클릭하면 브라우저 상단에서 가져온 풀 탭처럼 작동하도록 다시 애니메이션 된 다음 다시 롤업됩니다.

여기 내 jQuery를 수 있습니다 :

<script> 
    $(document).ready(function() { 
     $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 200); 
     $('#memberloginlink a').toggle(
      function(){ 
       $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500); 
      }, 
      function(){ 
       $('#memberloginrevealwrapper').animate({ marginTop: '-75px'}, 500); 
      } 
     ); 
    }); 

    $(document).ready(function(){ 
     var pageWidth = $(window).width(); 

     if (pageWidth <= 790) { 

      $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200); 
      $('#memberloginlink a').toggle(
       function(){ 
        $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500); 
       }, 
       function(){ 
        $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500); 
       } 
      ); 

     }; 
    }); 

</script> 

브라우저의 크기를 조정할 때까지이 잘 작동합니다. 브라우저 크기를 조정할 때 새 높이를 찾지 못하고 높이를 다시 조정하지 않습니다.

다음은 실제 사이트 인 clients.januarycreative.com/PES입니다. 나는 페이지 상단의 "회원 로그인"탭을 언급하고 있습니다.

브라우저 크기를 조정할 때 jQuery를 새로 고칠 수있는 방법을 알고 계신가요? 나는 내가 아는 모든 것을 시도해 보았고, 페이지를 자르거나 페이지가 농구처럼 여러 번 연속으로 튀어 오르는 것에 이르기까지 모든 것을 관리했다.

미리 감사드립니다.

Answer 1

브라우저의 크기가 조정되면 코드를 다시 다시 실행해야합니다. 당신이 가지고있는 것은 페이지로드시 코드 하나를 실행하는 것입니다. 루프 (기술적으로 페이지 크기가 조정됨에 따라 반복되는 이벤트)이 필요합니다. 여기

당신은 이동 :

function updateSize() { 
    var pageWidth = $(window).width(); 

    if (pageWidth <= 790) { 
     $('#memberloginrevealwrapper').animate({ marginTop: '-147px' }, 200); 
     $('#memberloginlink a').toggle(
      function(){ 
       $('#memberloginrevealwrapper').animate({ marginTop: '0' }, 500); 
      }, 
      function(){ 
       $('#memberloginrevealwrapper').animate({ marginTop: '-147px'}, 500); 
      } 
     ); 
    } 
} 

$(window).resize(updateSize);