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

Question

I'm using a multi-sectioned website in fullpage.js. Some of the sections should be available only through scrolling, but not through a navigation link. For example, in the first section, you should get to a second part of that section by scrolling (once), but the navigation will still show the first element as active. If you click on the second link in the navigation, you get to the second real section, which would be the third, if you consider the first two seperate. When I assign two sections the same anchor in the initialization, scrolling between the two stops working. If I try to assign multiple values for data-menuanchor in the navigation, it doesn't work either.

Answer 1

The best way to do it would be to create your own navigation element and not the one provided by fullpage.js.
This way you'll have total control over it.
By using the fullpage.js method moveTo you can activate or desactivate elements in your menu by adding or removing a class and you can do that using a callback such as afterLoad or onLeave.
Demo online
Having the following HTML menu:
<div id="myMenu">
<span id="element1">Section 1</span>
<span id="element2">Section 2</span>
<span id="element3">Section 3</span>
</div>
You can use this:
$('#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');
}
});