Javascript Webflow和Fullpage.js相互干扰_Javascript_Conflict_Fullpage.js

Javascript Webflow和Fullpage.js相互干扰

javascript

Javascript Webflow和Fullpage.js相互干扰,javascript,conflict,fullpage.js,Javascript,Conflict,Fullpage.js,我目前正在用webflow设计的一个测试网站上使用fullpage.js插件。在我加入插件之前，一切都正常工作。现在，webflow的滚动交互不再起作用了我认为这两个javascript文件相互干扰，限制了另一个的功能正常工作。我很想解决这个问题，但我真的不知道如何解决是未包含fullpage.js的站点。是包含fullpage.js的站点。如您所见，在第一个示例中，段落在滚动时淡入淡出。在第二个例子中，他们没有。段落只是停留在其初始外观状态，即不透明度=0。我真的很想看到fullpage.

我目前正在用webflow设计的一个测试网站上使用fullpage.js插件。在我加入插件之前，一切都正常工作。现在，webflow的滚动交互不再起作用了

我认为这两个javascript文件相互干扰，限制了另一个的功能正常工作。我很想解决这个问题，但我真的不知道如何解决

是未包含fullpage.js的站点。是包含fullpage.js的站点。如您所见，在第一个示例中，段落在滚动时淡入淡出。在第二个例子中，他们没有。段落只是停留在其初始外观状态，即不透明度=0。我真的很想看到fullpage.js与webflow交互并肩工作

这是html代码：

在这里可以找到包含的两个javascript文件：

jaroquastenberg.de//u x/help/01/js/webflow.js

jaroquastenberg.de//u x/help/01/js/jquery.fullPage.js

是否有人擅长javascript并能找出这两个脚本之间的冲突

提前谢谢

Jaro

您可以在以下内容中找到答案：

jQuery滚动事件不起作用

答案与

也可以考虑使用FultPaj.js提供的回调，如后缀、OnLead、SuxLoLeLeaveAn和OnStLeDeleWAVE中详细描述的DOCS或添加到包含活动段/幻灯片的体元素的类。

以及：

视差不适用于fullpage.js

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

说明：视差，以及许多其他依赖于站点滚动的插件，监听javascript的scrollTop属性。fullPage.js实际上不会滚动站点，但会更改站点的top或translate3d属性。只有在使用fullPage.js选项scrollBar:true或autoScrolling:false时，它才会以scrollTop属性可以访问的方式实际滚动站点

如果您只是想让文本淡入淡出，我会使用添加到页面更改主体中的CSS类。但是也可以随意使用回调以及javascript或jQuery来创建效果。

我解决了如果使用FULLPAGE.JS，如何在WEBFLOWE中运行滚动动画的问题。要滚动定位，刷新每个定位后，按如下方式刷新scrolla位置：

$document.readyfunction{ $'fullpage'。fullpage{ 锚定：['01'，'02'，'03'，'04'，'05']，没错，宽松：“easeInOutCubic”，滚动速度：600，对,， scrollOverflowReset:true， // 后装：功能起点、目的地、方向{ var loadedSection=此； //刷新滚动位置 $.fn.fullpage.setAutoScrollingfalse； $.fn.fullpage.setAutoScrollingtrue； // iforigin.anchor==“01”{ } iforigin.anchor==“02”{ } iforigin.anchor==“03”{ } iforigin.anchor==“04”{ } iforigin.anchor==“05”{ } } };

};我不希望我的文字淡入淡出。这只是我创建的测试页面。对于动画，我想超越CSS和juse javascript的可能。因此，我认为使用添加到body中的活动类对我不起作用。我要怎么做才能使用回调？我必须在这里插入什么代码才能使webflow生成的动画正常工作？在示例中，第二页和第三页为空白。

<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>

<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>

.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;
}