Прокрутка навигационной панели fullPage.js

поэтому я создаю сайт с fullPage.js, однако я хотел бы использовать созданную мной настраиваемую панель навигации. Я хочу, чтобы кнопки панели навигации менялись при прокрутке к соответствующему разделу (т.е. если я прокручиваю до раздела контактов, кнопка контакта загорается на панели навигации), например scrollspy в начальной загрузке.

Как я могу это сделать?

Большое спасибо! Я гуглил часами, но не могу найти ответа.

РЕДАКТИРОВАТЬ: для всех, кто может столкнуться с этой проблемой, вот что я сделал

Я добавил идентификатор к моей ul, который содержал мои элементы навигационной панели, и добавил data-menuanchor="your anchor goes here"

затем при полной инициализации js добавлен пункт меню

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

Затем я вошел в файл css fullpagejs и отредактировал эту часть, чтобы она отображалась так, как я хотел, когда раздел был активен.

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 за быстрый и полезный ответ


javascript html css fullpage.js scrollspy
person 064xp    schedule 15.04.2018    source источник
comment
Было бы здорово, если бы вы могли предоставить минимальный, полный и проверяемый пример   -  person Pirate X    schedule 15.04.2018

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете проверить документацию 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'});

It looks like you are looking for.

Также вы можете использовать обратный вызов 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("Второй слайд загружен");
    }
}

});

person Kasabucki Alexandr    schedule 15.04.2018
comment
Спасибо!! Использование опции меню и небольшое изменение файла css fullpagejs помогло. - person 064xp; 16.04.2018