fullpage.js垂直スクロールを検出する方法

Question

fullpage.jsプラグインが提供するいくつかの「段階」を持つページを構築しています。

私の主な問題は、固定位置ヘッダを適用する必要があることです。これは、デフォルトでは、これまでのほとんどの場合に使用する単純なスクリプトを使用して行います。そして、ここにある：

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

私は単純にビューポートのオフセットammountを計算し、固定位置を使用してヘッダにクラスを追加するためにそれを伝えます。しかしここでの問題点は、fullpage.jsでは単純なスクリプトでオフセットを検出できないため、クラスが適用されていないことです。

この問題を回避するにはどうすればよいですか？自分のためにそれを整理して管理

Answer 1

次のように、私は単純にその設定からスクロールバーを追加しました：

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

私のスクリプトが動作します。この方法は、それをフォローするscollbarを有しているからです。

注：これは、固定ヘッダの総合的なソリューションではありません私の具体的な質問、答えます。これに関する詳細については、私の最初の投稿をお読みください。

Answer 2

onLeave賢明なあなたがaddClassできnextIndex引数を使用するか、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> 

2番目のオプションは、あなたは、あなたが

<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>