중간 지점 (배수); 내가 스크롤하는 동안 대부분의 요소를 애니메이션, <a href="http://www.piroc.com/delete/waypointsTest.html" rel="nofollow noreferrer">http://www.piroc.com/delete/waypointsTest.html</a>에 여러 중간 점을 사용하고

Question

작동하지 refreshAll. 하지만 애니메이션 객체의 높이가 변경되면 다음 웨이 포인트가 위치에 맞지 않습니다. 나는 refreshAll() 함수에 대한 모든 것을 읽고 적절하다고 생각되는 곳에서 사용했지만 분명히 옳지 않습니다. 또한 창 크기를 조정할 때마다 페이지의 네 원의 애니메이션이 올바른 위치에서 작동하지 않습니다.

여기 내 코드

var homeCircles = jQuery('#home-circles'); 
var whatWeDo = jQuery('#what-we-do'); 
var ourWork = jQuery('#our-work'); 
var caseStudies = jQuery('.case-studies'); 
var homeLogo = jQuery('#home-logo'); 
var headerLogo = jQuery('#header-logo'); 

//scrolling animations by way of 'waypoint' jquery plugin. 

var homeLogoPos = homeLogo; 
var homeLogoOffset = homeLogoPos.offset(); 

var waypointHeaderLogo = new Waypoint({ 
    element: headerLogo, 
    offset: function() { 
      return -(homeLogo.height() + homeLogoOffset.top - 190) 
     }, 
    handler: function(direction) { 
     if (direction === 'down') { 
      jQuery(this.element).addClass('scrolled'); 
     } else { 
      jQuery(this.element).removeClass('scrolled'); 
     } 
     Waypoint.refreshAll; 
     //tried the following as well, no luck 
     Waypoint.disableAll(); 
     Waypoint.enableAll(); 
    } 
}) 

var waypointWhatWeDo = new Waypoint({ 
    element: whatWeDo, 
    offset: '99%', 
    handler: function(direction) { 
     if (direction === 'down') { 
      whatWeDo.addClass('scrolled'); 
     } else { 
      whatWeDo.removeClass('scrolled'); 
     } 
     Waypoint.refreshAll(); //causes an error 
    } 
}) 

var waypointHomeCircles = new Waypoint({ 
    element: homeCircles, 
    offset: '99%', 
    handler: function(direction) { 
     if (direction === 'down') { 
      homeCircles.addClass('scrolled'); 
     } else { 
      homeCircles.removeClass('scrolled'); 
     } 
     Waypoint.refreshAll; 
    } 
}) 

var waypointHomeCircles2 = new Waypoint({ 
    element: homeCircles, 
    offset: '99%', 
    handler: function(direction) { 
     if (direction === 'down') { 
      ourWork.addClass('scrolled'); 
     } else { 
      ourWork.removeClass('scrolled'); 
     } 
     Waypoint.refreshAll; 
    } 
}) 

var waypointsCaseStudies = new Waypoint({ 
    element: caseStudies, 
    offset: '99%', 
    handler: function(direction) { 
     if (direction === 'down') { 
      caseStudies.addClass('scrolled'); 
     } else { 
      caseStudies.removeClass('scrolled'); 
     } 
    } 
}) 

주이다 : 나는 (기능 괄호) Waypoint.refreshAll()를 사용할 때 내가 스택 오류가 발생합니다.

refreshAll를 사용하는 방법에 대한 포인터()가 제대로 감상 할 수있다.

Answer 1

마지막 jQuery Waypoints Refresh with CSS Transition 에 해결하는 방법을 발견하여 문제 중간 지점 전에 완료 될 필요가 내 .scrolled 클래스 포함 된 CSS 전환이 refreshedAll() 또한, 당신이 refreshAll를 호출해서는 안 보인다 수 있다고했다() 핸들러 내에서. 그것은 뒤늦은 지견에서 명백하지만 문서는 구체적으로 언급하지 않습니다. 도움이되기를 바랍니다.