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

Question

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

Answer 1

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

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

通过使用 fullpage.js 方法 moveTo，您可以通过添加或删除一个类来激活或停用菜单中的元素，您可以使用诸如 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');
    }
});