뷰포트 너비가 1000px보다 큰 경우 WayPoint 만 실행 하시겠습니까?

Question

뷰포트가 특정 너비보다 큰 경우에만 WayPoint를 실행하는 방법이 있습니까? 가급적이면 크기가 변경 될 때 너비가 바뀌는 지 확인 하시겠습니까?

일반적으로 나는이 부분을 남겨두고 싶습니다.하지만 4 개의 섹션이 있으며, 그들이 볼 수있게되면 .in-view 클래스를 추가하여 divs에 애니메이션을 적용 할 수 있습니다. 문제는 (내 생각에) 모바일 섹션에서 슬라이드 쇼 (슬릭 슬라이더)로 표시되므로 .slick-current에서 동일한 애니메이션/전환 스타일링을 사용하고 때로는 작동하지 않는 경우가 있는데 이는 요소를 .in-view으로 설정했기 때문일 수 있습니다. ?

$(document).ready(function(){ 
    var waypoints = document.querySelectorAll('.showcase__item'); 
    for (var i = waypoints.length - 1; i >= 0; i--) { 
     var waypoint = new Waypoint({ 
      element: waypoints[i], 
      handler: function(direction) { 
       this.element.classList.toggle('in-view'); 
      }, 
      offset: '60%', 
     }); 
    } 
}); 

...이 가능한가요 그것도 좋은 생각이다 :

이것은 내가 사용하고 코드는? 이것이 성과에 얼마나 스트레스가 될지 잘 모르겠습니까?

Answer 1

$(window).resize() 및 $(window).width();을 확인할 수 있습니다. $(window).resize() 이벤트는 브라우저 창의 크기가 변경되면 창 요소로 보내지고 $(window).width();은 현재 창의 너비를 가져옵니다. 다음은 코드의 스 니펫입니다.

$(document).ready(function(){ 
    $(window).resize(function() { 
     width=$(window).width(); 
     if (width > 1000){ 
      var waypoints = document.querySelectorAll('.showcase__item'); 
      for (var i = waypoints.length - 1; i >= 0; i--) { 
       var waypoint = new Waypoint({ 
        element: waypoints[i], 
        handler: function(direction) { 
         this.element.classList.toggle('in-view'); 
        }, 
        offset: '60%', 
       }); 
      } 
     } else { 
      // Your logic when the screen size is less then 1000 px. 
      if ($("#someID").hasClass("classname")) { 
       $("#someID").removeClass("classname"); 
      } 
     } 
    }); 
}); 

Answer 2

난 정말이 플러그인을 모르지만 그것은 window.matchMedia().addListener() 방법을 사용하여 가능한 것, 그것은 이벤트의 크기를 조절 창으로 결합보다 더 나은 것입니다. 그런 다음 웨이 포인트 플러그인을 활성화/비활성화 할 수 있습니다. 그건 그렇고, 당신은 jQuery의 방법을 사용하여 플러그인을 초기화해야합니다.

은 다음 코드는 테스트되지 않았습니다 :

var widthMatch = window.matchMedia("(min-width:1000px)"); 
var waypoints; 

widthMatch.addListener(function(e) { 
    switchWayPoints(e.matches); 
}); 

function switchWayPoints(enable) { 
    waypoints[enable ? "enableAll" : "disableAll"](); 
} 

$(document).ready(function() { 
    waypoints = $('.showcase__item').waypoint(function(direction) { 
    // -> Seem strange to call it here without any direction check?! ->$(this).toggleClass('in-view'); 
    }, { 
    offset: '60%' 
    }); 

    switchWayPoints(widthMatch.matches); 
});