冲突的库：Fullpage.js和ScrollMagic问题

所以我想提出一个垂直视差滚动网站有不同的部分，我想他们之间进行导航。所以我选择了ScrollMagic用于导航，fullpage.js用于导航。我在我的头文件中包含fullpage.jsCSS文件。冲突的库：Fullpage.js和ScrollMagic问题

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.7/jquery.fullPage.css">

问题是当我试图让他们两个。所以我在标签<body>之间的代码是

<div id="fullpage"> 
     <div class="spacer s0"></div> 
     <div class="section"> 
      <div id="parallax1" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-1.jpg);"> 
       </div> 
      </div> 
     </div> 
     <div class="spacer s1"> 
      <div class="box2 blue"> 
       <p>Content 1</p> 
      </div> 
     </div> 
     <div class="spacer s0"></div> 
     <div class="section"></div> 
      <div id="parallax2" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-2.jpg);"></div> 
      </div> 
     <div class="spacer s1"> 
      <div class="box2 blue"> 
       <p>Content 2</p> 
      </div> 
     </div> 
     <div class="spacer s0"></div> 

     <div class="section"> 
      <div id="parallax3" class="parallaxParent"> 
       <div style="background-image: url(img/bcg_slide-3.jpg);"></div> 
      </div> 
     </div> 
     <div class="spacer s2"></div> 
     <div id="trigger1" class="spacer s0"></div> 
     <div> 
     <svg height="150" width="460" style="position: absolute; z-index: 10;"> 
      <path id="line" d="M 100 100 l 360 0" stroke="red" stroke-width="3" fill="none" /> 
       <!-- Mark relevant points --> 
       <g stroke="black" stroke-width="3" fill="black"> 
       <circle id="pointA" cx="100" cy="100" r="3" /> 
       <circle id="pointB" cx="450" cy="100" r="3" /> 
       </g> 
       Sorry, your browser does not support inline SVG. 
      </svg> 
     </div> 
     <div id="fp-nav" class="right" style="margin-top: -33.5px;"> 
      <ul id="nav"> 
       <li> 
        <a href="#parallax1" class=""><span></span></a> 
        <div class="fp-tooltip right">First</div> 
       </li> 
       <li> 
        <a href="#parallax2" class=""><span></span></a> 
        <div class="fp-tooltip right">Second</div> 
       </li> 
       <li> 
        <a href="#parallax3" class=""><span></span></a> 
        <div class="fp-tooltip right">Third</div> 
       </li> 
      </ul> 
     </div> 
    </div>

，并在底部我刚刚结束我</body>标签

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.js"></script> 
<script src="js/jquery.fullPage.min.js"></script> 
<script src="js/_main.js"></script> 
<script src="js/fullpage.js"></script>

我想有一个平滑滚动到部分之前宣布我的jQuery库。也许还有其他方法可以做到这一点。我definetly需要Scollmagic，我会画SVG's，做需要触发

来源

2016-02-10 Andrejs Gubars

FullPage.js已经有平滑滚动到部分功能，我觉得你不需要使用ScrollMagic这一点。 – Pedram

嗯，我需要为ScrollMagic SVG绘图和其他东西以备将来 –

嗯，事实上，我发现一个tweek如果我设置'滚动条：TRUE'为'fullpage.js'它导航顺利，但现在我不能用我的键盘或鼠标 –

如果你看一看fullpage.js FAQs其他动画，你会发现这一点：

视差不fullpage.js工作。

简短的回答：使用fullPage.js的scrollBar:true选项或autoScrolling:false，如果你不想使用自动滚动功能。

说明：视差以及许多其他取决于站点滚动的插件会侦听javascript的scrollTop属性。 fullPage.js实际上并不滚动网站，但它会更改网站的顶部或translate3d属性。仅当使用fullPage.js选项scrollBar:true或autoScrolling:false时，它实际上将以可供scrollTop属性访问的方式滚动网站。

来源

2016-02-10 14:25:03 Alvaro

滚动太棒了:)我接受它作为答案。我实际上在20分钟前发现了这个，花了我一段时间。 –

@AndrejsGubars任何建议，以便更容易找到？ – Alvaro

其实我一直在玩''fullpage.js'的官方文档设置，并且神奇地它工作:)我发现它在github上的问题之一https://github.com/alvarotrigo/fullPage.js/issues/150如果你看最后的评论，作者解释了该怎么做。 –

冲突的库：Fullpage.js和ScrollMagic问题

回答

相关问题