如何在fullPage.js中爲不同的填充區域填充頂部和底部值？

Question

通常在fullpage.js我們可以通過下面的代碼設置單一的全球 paddingTop，paddingBottom來值：

$('#fullpage').fullpage({ 
     paddingTop: '130px', 
     paddingBottom: '50px', 
}); 

我的問題是我們可以分配多個paddingTop，paddingBottom來值個別滾動部分，以實現更靈活的佈局顯示？

$(document).ready(function() { 
 
    $('#fullpage').fullpage({ 
 
    anchors: ['firstPage', 'secondPage'], 
 
    sectionsColor: ['#4A6FB1', '#939FAA'], 
 
    scrollOverflow: true, 
 
    sectionSelector: '.section', 
 
    slideSelector: '.slide', 
 
    slidesNavigation: true, 
 
    slidesNavPosition: 'bottom', 
 
    verticalCentered: false, 
 
    resize: false, 
 
    autoScrolling: true, 
 
    paddingTop: '130px', 
 
    paddingBottom: '50px' 
 
     
 
    }); 
 
});

.slider-container { 
 
    width: 50%; 
 
} 
 
.title-text { 
 
    font-size: 30px; 
 
    font-weight: bold; 
 
} 
 
p { 
 
    line-height: 3em; 
 
} 
 

 
.contentline { border:1px solid white; } 
 

 
#demo { 
 
    position: absolute; 
 
    top: 50px; 
 
    margin: 0; 
 
    left: 0; 
 
    right: 0; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://alvarotrigo.com/fullPage/vendors/jquery.slimscroll.min.js"></script> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
 
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" rel="stylesheet"/> 
 
<script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script> 
 

 
<div id="fullpage"> 
 
    <div class="section"> 
 
    <div class="container slider-container"> 
 
     <div class="row margin-0" id="demo"> 
 
     <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0"> 
 
      <div class="title-text">padding:130px,bottom:80px layout</div> 
 
     </div> 
 
     </div> 
 

 
     <div class="slide contentline" id="slide1" data-anchor="s1"> 
 
     <div class="row margin-0"> 
 
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding-0"> 
 
      <p class="title-text">you may press Arrow Down Key to scroll to the next section </p> 
 
      <p>line1</p> 
 
      <p>line2</p> 
 
      <p>line3</p> 
 
      <p>line4</p> 
 
      <p>line5</p> 
 
      <p>line6</p> 
 
      <p>line7</p> 
 
      <p>line8</p> 
 
      <p>line9</p> 
 
      <p>line10</p> 
 
      <p>line11</p> 
 
      <p>line13</p> 
 
      <p>line14</p> 
 
      <p>line15</p> 
 
      <p>line16</p> 
 
      <p>line17</p> 
 
      <p>line18</p> 
 
      <p>line19</p> 
 
      <p>line20</p> 
 
      <p>line21</p> 
 
      <p>line22</p> 
 
      <p>line23</p> 
 
      <p>line24</p> 
 
      <p>line25</p> 
 
      <p>line26</p> 
 
      <p>line27</p> 
 
      <p>line28</p> 
 
      <p>line29</p> 
 
      <p>line30</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="slide" id="slide2" data-anchor="s2"> 
 
     slide2 
 
     </div> 
 
     <div class="slide" id="slide3" data-anchor="s3"> 
 
     <p>slide3</p> 
 
     </div> 
 
     <div class="slide" id="slide4" data-anchor="s4"> 
 
     <p>slide4</p> 
 
     </div> 
 
    </div> 
 
    <!--end of container--> 
 
    </div> 
 
    <div class="section title-text"> 
 
    <div class="contentline"> 
 
      Some sections<br> which require different<br> paddingTop and padding bottom values<br> 
 
For example this page, if i need paddingTop: 20px; paddingBottom:20px;<br> instead of running global value of 130px 50px;<br> 
 
    if using css to override padding,<br> 
 
    the calculated slider height is still wrong. 
 
    </div> 
 
</div> 
 
</div>

Answer 1

您可以按照@CraigduToit建議覆蓋它。 Fullpage.js會讀取您的值，您可以看到here。

Here's an example重寫paddingTop值。我用灰色將沒有填充的實際內容區域着色。

我只是用：

#section2 { 
    padding-top: 10px !important; 
} 

有了這個初始化：

$('#fullpage').fullpage({ 
    sectionsColor: ['yellow', 'orange', 'purple', '#ADD8E6'], 
    paddingTop: '100px', 
    paddingBottom: '100px', 
    scrollOverflow: true, 
}); 

Answer 2

我相信這可以用CSS來實現，但它需要你添加（或借重）一個uniuque類各部分內容。

我添加了一個類「testingstuff」對第二部分你的孩子的div，所以HTML將是：

<div class="section title-text fp-section active testingstuff">....</div> 

再接着簡單地創建具有以下屬性中的CSS類：

.testingstuff{ 
padding:30px 0px 30px 0px !important; 
} 

所以展望未來，所有你需要做的是爲每個部分一類，而不是最優雅的方式做到這一點，但它是相當方便快捷。

希望這會有所幫助。