2017-09-27 23 views
0

http://www.piroc.com/delete/waypointsTest.htmlで複数のウェイポイントを使用していますが、主にスクロール中に要素をアニメーション化しています。アニメーションオブジェクトの高さが変更されると、次のウェイポイントの位置がずれてしまいます。私はrefreshAll()関数に関するすべてを読んで、適切だと思うところで使っていましたが、それは明らかに正しくありません。 また、ウィンドウのサイズを変更すると、ページ上の4つの円のアニメーションが正しい位置で機能しません。ウェイポイント(複数); refreshAll not working

は、ここに私のコード

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()を正しく使用する方法についての任意のポインターが正しく評価されます。

答えて

0

は最後にjQuery Waypoints Refresh with CSS Transition に解決する方法を発見し、問題のウェイポイントの前に完了する必要が私の.scrolledクラスに含まれるCSSの遷移がrefreshedAll() も、あなたがrefreshAllを呼ぶべきではないと思われることをしたということでした()ハンドラ内のそれは後見では明らかですが、ドキュメントでは特に言及していません。 誰かを助けることを願って