Webflow与Fullpage.js相互干扰

Question

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

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

这是没有包含fullpage.js的站点。这是包含fullpage.js的站点。正如您所看到的，在第一个例子中，段落在滚动时逐渐消失。在第二个例子中，它们没有，段落只是停留在最初的外观状态，即不透明= 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文件。

js/_x/help/01/js/webflow.js.js

jaroquastenberg.de/_x/help/01/js/jquery.fullPage.js

_

有没有人擅长javascript，并能找出这两个脚本在哪里相互冲突？

提前感谢！

贾罗

Answer 1

你可以在fullPage.js常见问题中找到答案

jQuery滚动事件无法工作

与视差不适用于fullpage.js相同的答案 还可以考虑使用fullpage.js提供的回调，例如在docs 中详细介绍的afterLoad、onLeave、afterSlideLeave和onSlideLeave，或者添加到包含活动部分/幻灯片.的body元素中的类。

和：

视差不适用于fullpage.js. 简短回答:如果不想使用自动滚动功能，将使用滚动条: fullPage.js的真选项或自动滚动:false。 Explanation:视差以及许多依赖于站点滚动的其他插件都会监听javascript的scrollTop属性。fullPage.js实际上并没有滚动站点，但它更改了站点的顶部或translate3d属性。只有在使用fullPage.js选项滚动条:true或autoScrolling:false时，它才会以scrollTop属性可访问的方式实际滚动站点。

如果您只希望您的文本是fadeIn或out，我将使用添加到页面正文中的CSS类。但是，也可以使用回调和javascript或jQuery相结合来创建效果。

Answer 2

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

​

$(document).ready(function() {
      $('#fullpage').fullpage({
      	 anchors: ['01', '02', '03', '04', '05'],
         animateAnchor: true,
         easing: 'easeInOutCubic',
         scrollingSpeed: 600,
         scrollOverflow: true,
         scrollOverflowReset: true,
         //
         afterLoad: function(origin, destination, direction){
    	 var loadedSection = this;
         //refresh scroll position
         $.fn.fullpage.setAutoScrolling(false);
         $.fn.fullpage.setAutoScrolling(true);
         //
         if(origin.anchor == '01'){

    		 }
         if(origin.anchor == '02'){

    		 }
         if(origin.anchor == '03'){

     		 }
         if(origin.anchor == '04'){

    	 	 }
         if(origin.anchor == '05'){

    	 	 }
    	}
    	});
});

​