Scrollspy 导航栏 fullPage.js

Question

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

中的 scrollspy

我该怎么做？

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

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

我向包含我的导航栏项目的 ul 添加了一个 id，并添加了 data-menuanchor="your anchor goes here"

然后，在全页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("Второй слайд загружен");
    }
}

});

Scrollspy 导航栏 fullPage.js

Scrollspy navbar fullPage.js

html

javascript

css

scrollspy

fullpage.js