Question

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

我该如何解决这个问题？

非常感谢！我一直在谷歌搜索几个小时，但我找不到答案。

编辑：对于任何可能遇到此问题的人来说，这就是我做的事情

我在我的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 navbar fullPage.js

1 个答案: