Webflow和Fullpage.js相互干扰

Webflow and Fullpage.js interfering with each other

本文关键字：干扰 js Fullpage Webflow      更新时间：2023-09-26

我目前正在用webflow设计的测试网站上使用fullpage.js插件。在我包含插件之前，一切都正常工作。现在，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文件:

jarocastenberg.de/x/help/01/js/webflow.js

jarocastenberg.de/x/help/01/js/jquery.fullPage.js

_

有没有人擅长javascript，能够发现这两个脚本在哪里冲突？

提前感谢！

Jaro

您可以在fullPage.js常见问题解答中找到答案：

jQuery滚动事件不起作用

与Parallax相同的答案不适用于fullpage.js

此外，请考虑使用fullpage.js提供的回调，如文档中详细介绍的afterLoad、onLeave、afterSlideLeave和onSlideLeaf，或添加到包含活动部分/幻灯片的body元素中的类

和：

Parallax不适用于fullpage.js。

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

解释：Parallax和许多其他依赖于网站滚动的插件都监听javascript的scrollTop属性。fullPage.js实际上并不滚动网站，但它更改了网站的top或translate3d属性。只有当使用fullPage.js选项scrollBar:true或autoScrolling:ffalse时，它才会以scrollTop属性可以访问的方式滚动网站。

如果你只是想让你的文本变淡或变淡，我会在页面更改时使用添加到正文中的CSS类。但是，可以随意使用回调，也可以与javascript或jQuery结合使用来创建效果。

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

$(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'){
    	 	 }
    	}
    	});
});

相关文章：