2016-05-31 4 views
1

Jetzt versuche ich meine Website von fullpage.js Plugin zu machen.Weird unteren Bereich von fullpage.js

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

Aber es ist ein seltsamer unterer Bereich innerhalb des Ausschnitts, die Inhalte, die länger als ihre Querschnittshöhe. (Abschnitt, die scrollOverflow haben)

So.

enter image description here

Dies ist mein Code.

$(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"); 
     } 

    }); 
}); 

Alle js-Datei, die ich aufgenommen habe.

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

Also weiß jemand, wie man das beheben kann? Danke!

+0

Sieht für mich, dass die obige Karte nicht auf einem einzigen Bildschirm passte, so dass es auf eine neue Folie aufgeteilt wurde. –

+0

Yeah der Inhalt ist größer, dass ein einzelner Bildschirm, so dass ich scrollOverflow für sie einschalten kann in nur einem Bildschirm scrollen, aber es immer noch länger als es sein sollte. – user3403614

+0

Fügen Sie die externe scrolloverflow.js-Bibliothek ein, wie in der Dokumentation angegeben? Sie teilen nicht genug mit uns, also können wir hier wirklich nicht helfen, nur zu raten. –

Antwort

1

Sie sollten die Klasse fp-auto-height wie detailliert in the fullpage.js docs verwenden.

Siehe die demo online oder die eine in codepen.

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

Ich habe versucht, aber immer noch nichts passiert. – user3403614

+1

Dann machst du etwas falsch :) – Alvaro

+0

Ich bin mir nicht sicher, warum, aber wenn ich aufhören zu verwenden. CSS und verwenden Sie dann ihre. SCS statt alle Dinge gelöst ist. – user3403614