jQuery는 조건에 따라 애니메이션을 정지합니다.

Question

다른 미디어를 사용하여 웹 사이트를 완벽하게 표시하려면 @media (최소 너비, 최대 너비)을 사용하여 웹 사이트를 구축하고 있습니다.

나는 스크롤의 화면의 상단을 따라 메뉴가 있고 이것은 jQuery 코드입니다 :

var win_width = $(window).width(); 

     if (win_width >= 751) { 
      var el = $('div.menu-header'); 
      var elpos_original = el.offset().top; 
      $(window).scroll(function(){ 
       var elpos = el.offset().top; 
       var windowpos = $(window).scrollTop(); 
       var finaldestination = windowpos; 
       if(windowpos<elpos_original) { 
        finaldestination = elpos_original; 
        el.stop().css({'top':0}); 
       } else { 
        el.stop().animate({'top':finaldestination-elpos_original+30},500); 
       } 
      }); 
     } 
    } 

그것은 잘 작동하지만 750 픽셀에서 창 크기를 조정하면 나는이 기능을 중지하고 싶습니다 var el을 원래 위치로 복원하십시오.

Answer 1

주, 스크롤 주어진 함수 내가 창 무한 높이를 갖고있는 것 같아요 크기를 조정하려고 할 때 사용자가

var el = $('div.menu-header'), 
elpos_original = el.offset().top; 
$(window).scroll (function() { 
    var win_width = $(this).width(); 
     if (win_width >= 751) { 
     var elpos = el.offset().top; 
     var windowpos = $(this).scrollTop(); 
     var finaldestination = windowpos; 
     if(windowpos<elpos_original) { 
      finaldestination = elpos_original; 
      el.stop().css({'top':0}); 
     } else { 
      el.stop().animate({'top':finaldestination-elpos_original+30},500); 
     } 
    } else { 
     $(this).resize(); // calling to handle declared below. 
    } 
}).resize(function() { 
     // Check when resizing whether size is at most 750 
     // and restore original position; 
     if($(this).width() <=750) { 
      el.stop().css("top", "0") 
     } 
})