所以我正在制作一个具有不同部分的垂直视差滚动网站，我想在它们之间导航。所以我选择了ScrollMagic对于视差和 fullpage.js用于导航。我已经包括了fullpage.js CSS文件在我的标题中。
<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> 之前声明了我的 jquery 库。标签
<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>
我想要平滑滚动到部分。也许还有其他方法可以做到这一点。我绝对需要Scollmagic正如我将要画的那样SVG's并执行其他需要触发器的动画
最佳答案
如果你看一下 fullpage.js FAQs你会发现这个:
Parallax doesn't work with fullpage.js.
Short answer: use the
scrollBar:trueoption for fullPage.js orautoScrolling:falseif you don't want to use the auto-scrolling feature.Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option
scrollBar:trueorautoScrolling:falseit will actually scroll the site in a way it is accessible for the scrollTop property.
关于javascript - : Fullpage. js 和 ScrollMagic 库冲突问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35316428/