如何将导航 link 分配给 fullpage.js 中的多个部分

Question

我在 fullpage.js 中使用一个多版块的网站。有些部分应该只能通过滚动访问，而不是通过导航访问 link。例如，在第一部分中，您应该通过滚动（一次）到达该部分的第二部分，但导航仍会将第一个元素显示为活动元素。如果您单击导航中的第二个 link，您将到达第二个实际部分，如果您将前两个部分分开考虑，这将是第三个部分。当我在初始化中为两个部分分配相同的锚点时，两个部分之间的滚动停止工作。如果我尝试在导航中为 data-menuanchor 分配多个值，它也不起作用。

Answer 1

最好的方法是创建您自己的导航元素，而不是 fullpage.js 提供的导航元素。

这样您就可以完全控制它。

通过使用 fullpage.js 方法 moveTo，您可以通过添加或删除 class 来激活或停用菜单中的元素，并且您可以使用诸如 afterLoad 或 onLeave.

Demo online

具有以下 HTML 菜单：

<div id="myMenu">
    <span id="element1">Section 1</span>
    <span id="element2">Section 2</span>
    <span id="element3">Section 3</span>
</div>

你可以使用这个：

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    afterLoad: function(anchorLink, index){
        var activeElement;
        if(index === 1){
           activeElement = $('#element1');
        }
        else if(index === 2 || index ===3){
           activeElement = $('#element2');
        }else if( index === 4){
            activeElement = $('#element3');
        }

        activeElement.addClass('active').siblings().removeClass('active');
    }
});

如何将导航 link 分配给 fullpage.js 中的多个部分

How can I assing a navigation link to multiple sections in fullpage.js

fullpage.js