奇怪的底部区域from fullpage.js

问题描述:

现在我尝试通过fullpage.js插件制作我的网站。奇怪的底部区域from fullpage.js

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

但是有具有比其截面高度含量不再是段中的怪异的底部区域。 (有scrollOverflow的部分)

像这样。

enter image description here

这是我的代码。

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

因此,任何人都知道如何解决这个问题? 谢谢!

+0

在我看来,上面的地图不适合在一个单一的屏幕上,因此它分裂到一个新的幻灯片。 –

+0

是的内容是一个单一的屏幕,所以我打开scrollOverflow他们可以滚动只有一个屏幕,但它仍然比它应该更长。 – user3403614

+0

您是否包含文档中指出的外部scrolloverflow.js库?你没有与我们分享足够的东西,所以我们这里真的没有办法帮助,只是猜测。 –

您应该使用类fp-auto-height作为详细in the fullpage.js docs

查看demo onlinein codepen

<div class="section">Whole viewport</div> 
<div class="section fp-auto-height">Auto height</div> 
+0

我试过了,但还是什么都没发生。 – user3403614

+1

然后你做错了什么:) – Alvaro

+0

我不知道为什么,但是当我停止使用他们的.css,然后使用他们的.scss,而不是每件事情都解决了。 – user3403614