javascript - Scrollspy 导航栏 fullPage.js

Question

所以我正在使用 fullPage.js 构建一个站点，但是我想使用我制作的自定义导航栏。我希望导航栏按钮在您滚动到相应部分时发生变化(即，如果我滚动到联系人部分，联系人按钮在导航栏中亮起)，就像 bootstrap 中的 scrollspy。

我该怎么做？

非常感谢!我已经在谷歌上搜索了几个小时，但就是找不到答案。

编辑:对于可能遇到此问题的任何人，这是我所做的

我向包含我的导航栏元素的 ul 添加了一个 id，并添加了 data-menuanchor="你的 anchor 在这里"

然后，在fullpage js初始化中，添加了菜单选项

`$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage',        
'lastPage'],
menu: '#id of your navbar ul'});`

然后我进入 fullpagejs css 文件并编辑这部分以在该部分处于事件状态时显示我想要的样子

fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{

background-color: #3b8d37;
color:white;

感谢@Kasabucki Alexandr 快速而有用的回复

Answer 1

您可以查看 fullPage.js 的文档。选项:菜单。

<ul id="myMenu">
  <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Первый раздел</a></li>
  <li data-menuanchor="secondPage"><a href="#secondPage">Второй раздел</a></li>
  <li data-menuanchor="thirdPage"><a href="#thirdPage">Третий раздел</a></li>
  <li data-menuanchor="fourthPage"><a href="#fourthPage">Четвёртый раздел</a></li>

$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'});

看起来你在找。

你也可以使用 afterSlideLoad 回调:

$('#fullpage').fullpage({
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
    var loadedSlide = $(this);

    //первый слайд второго раздела
    if(anchorLink == 'secondPage' && slideIndex == 1){
        alert("Первый слайд загружен");
    }

    //второй слайд второго раздела (supposing #secondSlide is the
    //привязка для второго раздела
    if(index == 2 && slideIndex == 'secondSlide'){
        alert("Второй слайд загружен");
    }
}

});