fullpage.jsの奇妙な底面

Question

今、私はfullpage.jsプラグインで自分のサイトを作ろうとしています。

https://github.com/alvarotrigo/fullPage.js#callbacks

しかし、彼らの断面高さよりも長いコンテンツを持っている部分の内側の奇妙な底面積があります。 （scrollOverflowを持つセクション）

このようにします。

これは私のコードです。

$(document).ready(function() { 
    $('#fullpage').fullpage({ 
     'navigation': true, 
     paddingTop: '0', 
     paddingBottom: '0', 
     scrollOverflow: true, 
     afterLoad: function(anchorLink, index){ 
      //using anchorLink 
      if(anchorLink == 'grey-fade-bg-slide'){ 
       //alert("eoaehou"); 
       $("body").css("background-image","url('img/team-bg.jpg')"); 
      } 

      if(anchorLink == 'banner-slide'){ 
       //$("#map").css("height","120px"); 
       if(window.location.href.indexOf("our-team-bg-slide") > -1 || window.location.href.indexOf("contact-us-bg-slide") > -1) { 
        //alert("ccccc"); 
        $("body").css("background-image","url('img/team-bg.jpg')"); 
       } 
      } 

      if(anchorLink == 'blue-bg-slide'){ 
       //alert("eoaehou"); 
       $("body").css("background-image","url('img/banner-bg-image.jpg')"); 
      } 
     }, 
     afterRender: function(){ 
      initMap(); 
      $(".our-team-bg-section h3").css("margin-top","120px"); 
      $(".contact-us-bg-section h3").css("margin-top","60px"); 
      $(".grey-fade-bg-section h3").css("margin-top","120px"); 
     } 

    }); 
}); 

すべてのjsファイルが含まれています。

<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 
<script src="js/bootstrap.min.js" type="text/javascript"></script> 
<script src="js/scrolloverflow.min.js" type="text/javascript"></script> 
<script src="js/jquery.fullPage.min.js" type="text/javascript"></script> 
<script src="js/jquery.easings.min.js" type="text/javascript"></script> 

誰もがこれを修正する方法を知っていますか？ ありがとう！

Answer 1

詳細in the fullpage.js docsのようにクラスfp-auto-heightを使用する必要があります。

demo onlineまたはin codepenを参照してください。