добавить класс в липкое меню с помощью fullpage.js

Я пытаюсь добавить класс в липкое меню при прокрутке, используя полную страницу .js.

Я бы хотел, чтобы # top-wrapper был нормальным при загрузке первого раздела / страницы, а затем, когда вы прокручиваете вниз, он добавляет класс is-fixed. Если вы вернетесь к первому разделу, класс будет удален.

В настоящее время происходит то, что по мере того, как пользователь прокручивает страницу вниз, добавляется класс is-fixed (что правильно). Однако, если вы вернетесь к первому разделу, класс не будет удален.

Вот мой код:

var fullPageInstance = new fullpage('#page-wrapper', {
    anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage'],
    menu: '#side-menu',
    slidesNavigation: true,
    scrollingSpeed: 1000,
    parallax: true,
    parallaxOptions: {
        type: 'cover',
        percentage: 62,
        property: 'translate'
    },
    onLeave: function(index, nextIndex, direction){
        if (nextIndex != 1){
            $('#top-wrapper').addClass('is-fixed');
        } else {
            $('#top-wrapper').removeClass('is-fixed');
        }
    }
});


javascript html jquery css fullpage.js
person probablybest    schedule 31.08.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Попробуйте свойство next.index

var fullPageInstance = new fullpage('#page-wrapper', {
  anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage', '6thpage'],
  menu: '#side-menu',
  slidesNavigation: true,
  scrollingSpeed: 1000,
  parallax: true,
  parallaxOptions: {
    type: 'cover',
    percentage: 62,
    property: 'translate'
  },
  onLeave: function(index, next, direction) {
    if (next.index != 0) {
      $('#top-wrapper').addClass('is-fixed');
    } else {
      $('#top-wrapper').removeClass('is-fixed');
    }
  }
});
.section:nth-child(odd) {
  background-color: green;
}

.section:nth-child(even) {
  background-color: red;
}

.is-fixed {
  color: #fff;
  position: fixed;
  z-index: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.min.js" integrity="sha256-e13jRNqOX98m6UAwI/yZTpcDseJtA8s86yfFs4Sqrv8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/vendors/scrolloverflow.min.js" integrity="sha256-R7CttZ4L0/szai0hbFUlPDiRaEJmqYuvLhyAOr19vQg=" crossorigin="anonymous"></script>

<div id="top-wrapper">top wrapper</div>
<div id="page-wrapper">
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
  <div class="section">Some section</div>
</div>

Примечание. Запустите демонстрацию в Full page представлении

person User863    schedule 31.08.2019