fullpage.js как определить вертикальную прокрутку

Question

Я строю страницу с несколькими «этапами», которые предоставляет плагин fullpage.js.

Моя основная проблема заключается в том, что мне нужно применить заголовок фиксированной позиции, который по умолчанию я использую с помощью простого сценария, который я использую для большинства случаев до сих пор. И вот оно:

$(document).scroll(function() { 
    var a = $(this).scrollTop() 
    if (a > 5) { 
$('header').addClass('headerSnap') 
    } else { 
    $('header').removeClass('headerSnap') 
    } 
}); 

Я просто вычислить видовое смещение суммы и сказать ему, чтобы добавить класс к заголовку, используя фиксированное положение. Но здесь проблема заключается в том, что fullpage.js не позволяет моему простому скрипту обнаружить смещение, поэтому класс не применяется.

Что можно сделать, чтобы обойти эту проблему?

Answer 1

Успели разобраться для себя, я просто добавил скроллбар из его параметров следующим образом:

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     scrollBar: true, 
    }); 
}); 

Таким образом, мой скрипт работает, так как он имеет scollbar следовать.

Примечание: Это отвечает мой конкретный вопрос, который не является общим решением для фиксированных заголовков. Пожалуйста, перечитайте мой первый пост для получения дополнительной информации об этом.

Answer 2

onLeave используя nextIndex аргумент мудры вы можете addClass или removeClass

<div id="main-section"> 
    <div class="section-one">Sectioin 1</div> 
    <div class="section-two">Sectioin 2</div> 
    <div class="section-three">Sectioin 3</div> 
</div> 

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery('#main-section').fullpage({ 
      sectionsColor: ['red', 'orange', 'yellow'], 
       onLeave: function(index, nextIndex, direction){   
        console.log(nextIndex); 
        if(nextIndex == 1){ 
         jQuery('header').removeClass('headerSnap'); 
        }else{ 
         jQuery('header').addClass('headerSnap');  
        } 
       } 
     }); 
    }); 
    </script> 

Второй вариант каждый основной раздел вы можете добавить одно имя класса, то вы можете обнаружить раздел с помощью setInterval и hasClass

<script type="text/javascript"> 
    jQuery(document).ready(function(){ 
     jQuery('#main-section').fullpage({ 
       sectionsColor: ['red', 'orange', 'yellow'], 
      }); 

     setInterval(function() { 
      if(jQuery('.section-one').hasClass('fp-completely')){ 
      alert('section 1'); 
      } 
      if(jQuery('.section-two').hasClass('fp-completely')){ 
      alert('section 2'); 
      } 
     }, 500); 
    }); 
    </script>