如何在 Fullpage.js 中的部分之间添加元素

Question

我试图在 fullpage.js 插件

的部分之间添加一些视差效果背景

代码是这样的

<div class="fallpage">
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
  <div class="parallex-background"></div>
  <div class="section">content</div>
</div>

一切正常，fullpage.js 忽略那些视差部分，除了滚动部分...鼠标不再工作或键盘控件、边点和菜单工作正常

如果我可以让插件在鼠标滚轮滚动和键盘控制正常工作的情况下忽略部分之间的这些视差背景，那就太好了:)

对于任何拼写错误，我们深表歉意

Answer 1

你不能那样做。 Fullpagejs 只需要部分之间的部分。

你可以做的是玩 fullpage.js 选项。将它们用作部分，为它们使用 fp-auto-height class 这样它们就不会全屏显示，并使用一些回调强制 fullpage.js 在您即将到达它们时跳转它们:

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        var destinationToIgnore = $('.section').eq(nextIndex -1).hasClass('ignore');

        if(destinationToIgnore){
            var destination = (direction === 'down') ? nextIndex + 1 : nextIndex - 1
            $.fn.fullpage.moveTo(destination);
        }
    }
});

我已经按照您只需要在您的部分中使用 class ignore 强制 fullpage.js 忽略它的方式对这个脚本进行编码，例如：

<div class="section fp-auto-height ignore">
    <div class="parallax">
        PARALLAX
    </div>
</div>

Reproduction online

现在你可以给我投票、拥抱、棒棒糖，甚至捐款！ :)

如何在 Fullpage.js 中的部分之间添加元素

how to add elements between sections in Fullpage.js

javascript

jquery

fullpage.js