javascript - 我们如何为 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,
});