我们如何为 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

我相信这可以通过 css 实现，但是它需要您为每个部分内容添加（或建立）一个独特的 class。

我在第二部分的 child div 中添加了 class "testingstuff"，因此 HTML 将是：

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

然后继续简单地在 .css 中创建具有以下属性的 class：

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

所以接下来，您需要做的就是为每个部分创建一个 class，这不是最优雅的方法，但它相当快速和简单。

希望对您有所帮助。

Answer 2

您可以按照@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,
});

我们如何为 fullPage.js 中的不同部分设置不同的填充顶部和底部值？

How can we make different padding top and bottom values for diff sections in fullPage.js?

html

javascript

css

jquery

fullpage.js