我目前正在使用 webflow 设计的测试网站上使用 fullpage.js 插件。一切正常，直到我包含该插件。现在，webflow的滚动交互不再起作用了。
我认为这两个 JavaScript 文件有点互相干扰，限制了另一个文件的功能正常工作。我很想解决这个问题，但我真的不知道如何解决。
This是不包含 fullpage.js 的网站。 This是包含 fullpage.js 的网站。正如您所看到的，在第一个示例中，段落在滚动时淡入和淡出。在第二个例子中，他们没有。这些段落只是保持其初始外观状态，即 opacity = 0。我真的很希望看到 fullpage.js 与 webflow 交互并排工作。
_
这是html代码:
<body>
<div class="pagewrap">
<div class="section blue01">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue02">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
<div class="section blue03">
<div class="w-container">
<p data-ix="scroll-fade-in"></p>
</div>
</div>
</div>
</body>
_
这是javascript代码:
<script type="text/javascript" src="js/webflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.pagewrap').fullpage({
'verticalCentered': true,
'css3': true,
'navigation': true,
'navigationPosition': 'right',
});
});
</script>
_
这是 CSS 代码:
.section.table,
.slide.table {
display: table;
width: 100%;
}
.tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.easing {
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
.section {
height: 100vh;
}
.section.blue01 {
background-color: #3cb7e8;
}
.section.blue02 {
background-color: #3ccbe8;
}
.section.blue03 {
background-color: #3ce2e8;
}
html.w-mod-js.w-mod-no-ios *[data-ix="scroll-fade-in"] {
opacity: 0;
}
_
您可以在此处找到两个包含的 javascript 文件:
jaroquastenberg.de/_x/help/01/js/webflow.js
jaroquastenberg.de/_x/help/01/js/jquery.fullPage.js
_
是否有精通 javascript 的人可以找出这两个脚本相互冲突的地方？
提前致谢!
贾罗
最佳答案
您可以在 fullPage.js FAQs 中找到答案:
jQuery 滚动事件不起作用
Same answer as Parallax doesn't work with fullpage.js
Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.
还有:
Parallax doesn't work with fullpage.js.
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if 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:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
如果您只想让文本淡入或淡出，我会使用在页面更改时添加到正文的 CSS 类。但请随意使用回调以及与 JavaScript 或 jQuery 结合来创建您的效果。
关于javascript - Webflow 和 Fullpage.js 互相干扰，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28395165/