Question

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

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

This是未包含fullpage.js的网站。 This是包含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文件：

jaroquastenberg.de/_x/help/01/js/webflow.js

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

_

是否有人擅长使用javascript并且可以找出两个脚本相互冲突的位置？

提前致谢！

哈罗

Answer 1

您可以在fullPage.js FAQs中找到答案：

jQuery滚动事件不起作用

与Parallax doesn't work with fullpage.js
相同的答案
另外，请考虑使用fullpage.js 提供的回调，例如afterLoad，onLeave，afterSlideLeave和onSlideLeave详细文档或添加到包含活动部分的body元素的类滑动。

和


视差不适用于fullpage.js。

简答：对fullPage.js或autoScrolling使用scrollBar：true选项：如果您不想使用自动滚动功能，请使用false。

说明： Parallax以及许多依赖于网站滚动的其他插件，会侦听javascript的scrollTop属性。 fullPage.js实际上并不滚动网站，但它会更改网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar：true或autoScrolling：false时，它才会以scrollTop属性可访问的方式实际滚动网站。

如果你只想让你的文字淡入或淡出，我会在页面更改时使用添加到正文的CSS类。但是随意使用回调以及javascript或jQuery来创建你的效果。

Answer 2

如果使用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'){

    	 	 }
    	}
    	});
});

Webflow和Fullpage.js相互干扰

2 个答案: