如何在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; 
} 

所以展望未来，所有你需要做的是为每个部分一类，而不是最优雅的方式做到这一点，但它是相当方便快捷。

希望这会有所帮助。