Webflow 和 Fullpage.js 相互干扰

Question

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

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

This is the site without the fullpage.js included. 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 滚动事件不起作用

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 class 添加到页面更改时的正文。但是请随意使用回调以及结合 javascript 或 jQuery 来创建您的效果。

Answer 2

我解决了如何在 WEBFLOWE 中运行滚动动画，如果你使用 FULLPAGE.JS。滚动ANCHOR，每个ANCHOR刷新后，刷新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'){

        }
     }
     });
});

Webflow 和 Fullpage.js 相互干扰

Webflow and Fullpage.js interfering with each other

javascript

conflict

fullpage.js