jquery - 如何修复 fullpage.js 中的导航栏和填充内容？

Question

我想在鼠标滚轮向上或向下时修复导航栏。

首先，我向下滚动鼠标转到下一页，然后向上滚动鼠标返回上一页，但容器似乎无法正常工作。

它丢失了我在 CSS 中设置的 padding-top。

你可以看到我录制的视频:

https://youtu.be/2Ddh3ruyzWc

$(document).ready(function() {
  $('#fullpage').fullpage({
      anchors: ['firstPage', 'secondPage'],
      navigation: true,
      navigationPosition: 'left',
      navigationTooltips: ['Sản Phẩm Mới', 'Hoạt Náo'],
      showActiveTooltip: false,
      menu: '#menu',
      scrollingSpeed: 700
  });

});

.section {
    padding-top: 50px;
}

.contentfit {
    height: 100%;
    position: relative;
}

.left-content {
    float: left;
    height: 100%;
    position: relative;
    width: 30%;
    background: url("http://www.studiometa.fr/assets/img/projets/94/idcampus__larger.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.right-content {
    float: left;
    width: 70%;
    height: 100%;
}

ul.navbar-nav > li {
  color: #000;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="menu" class="navbar navbar-fixed-top" role="navigation">
  <div class="container-fluid">  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">BRAND</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Sản Phẩm Mới</a></li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Hoạt Náo</a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="fullpage">
  <div class="section" id="section0">
    <div class="contentfit">
      <div class="right-content">
        <p>
	      Lorem ipsum dolor sit amet, consectetur adipisicing               elit. Incidunt nisi accusantium laborum inventore                 aliquid distinctio aliquam aut, officiis ratione a.
        </p>
      </div>
      <div class="left-content">
      </div>
    </div>
  </div>
  <div class="section" id="section1">
    <div class="contentfit">
      <div class="left-content">
      </div>
      <div class="right-content">
        <p>
	      Lorem ipsum dolor sit amet, consectetur adipisicing               elit. Incidunt nisi accusantium laborum inventore                 aliquid distinctio aliquam aut, officiis ratione a.
        </p>
      </div>
    </div>
  </div>

这是我来源中的主要最小代码。

你按下鼠标滚轮。在职的。继续向上滚动鼠标以了解我的问题。

我认为所有问题都在:

.section {
    padding-top: 50px;
}

我必须 padding-top 来填充内容。因为 .nav .navbar 隐藏了 .section 的内容。

Answer 1

你需要定义

html.fp-enabled body {
    margin-top: 50px;
}

并删除

.section {
    padding-top: 50px;
}

$(document).ready(function() {
  $('#fullpage').fullpage({
      anchors: ['firstPage', 'secondPage'],
      navigation: true,
      navigationPosition: 'left',
      navigationTooltips: ['Sản Phẩm Mới', 'Hoạt Náo'],
      showActiveTooltip: false,
      menu: '#menu',
      scrollingSpeed: 700
  });

});

.contentfit {
    height: 100%;
    position: relative;
}

.left-content {
    float: left;
    height: 100%;
    position: relative;
    width: 30%;
    background: url("http://www.studiometa.fr/assets/img/projets/94/idcampus__larger.jpg") no-repeat;
    background-size: cover;
    background-position: center;
}

.right-content {
    float: left;
    width: 70%;
    height: 100%;
}

ul.navbar-nav > li {
  color: #000;
}
html.fp-enabled body {
margin-top: 50px;
}

<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.9/jquery.fullPage.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="menu" class="navbar navbar-fixed-top" role="navigation">
  <div class="container-fluid">  
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="index.html">BRAND</a>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li data-menuanchor="firstPage" class="active"><a href="#firstPage">Sản Phẩm Mới</a></li>
        <li data-menuanchor="secondPage"><a href="#secondPage">Hoạt Náo</a></li>
      </ul>
    </div>
  </div>
</nav>

<div id="fullpage">
  <div class="section" id="section0">
    <div class="contentfit">
      <div class="right-content">
        <p>
	      Lorem ipsum dolor sit amet, consectetur adipisicing               elit. Incidunt nisi accusantium laborum inventore                 aliquid distinctio aliquam aut, officiis ratione a.
        </p>
      </div>
      <div class="left-content">
      </div>
    </div>
  </div>
  <div class="section" id="section1">
    <div class="contentfit">
      <div class="left-content">
      </div>
      <div class="right-content">
        <p>
	      Lorem ipsum dolor sit amet, consectetur adipisicing               elit. Incidunt nisi accusantium laborum inventore                 aliquid distinctio aliquam aut, officiis ratione a.
        </p>
      </div>
    </div>
  </div>