Bootstrap 4 失去内容 fullPage.js

Question

基本上我的问题是，当我使用 fullPage.js 向下滚动时，我丢失了“第 0 节”的内容，我不知道是不是睡眠不足，但我可以找不到问题，我正在链接 codepen，这样你就可以现场试用，提前致谢！

<div id="fullpage">
  <div class="section fp-auto-height" id="section0">
    <!-- Fin del menú de navegación -->
      <div class="banner">
        <div class="container">
          <div class="intro">
          <h1 class="jumbotitle">BRAND LOGO</h1>    
          <p class="jumboparr">¡Some text for information!</p>
        </div>
      </div>
   </div>
 </div>
 <div class="section" id="section1">
   <div class="slide sd1" id="slide1">
     <div class="container">
       <div class="row justify-content-center">
         <p class="sdp1">More info bla bla blaa </p>
         <p class="sdp1">The same info different color</p>
       </div>
     </div>
   </div>
   <div class="slide sd2" id="slide2">
     <div class="container">
       <div class="row justify-content-center">
         <p class="sdp2">¡Moooore infoooo lorem impsum! </p>
       </div>
      </div>
    </div>
  </div>
</div>

Codepen

Answer 1

我认为问题是.banner {height:800px;}。如果您更改它，例如，在 height:100vh 中，您可以看到您的内容。

https://codepen.io/anon/pen/mjdPpz

.navbar{
  background: black !important;
}
#header, #footer {
  position:fixed;
  display:block;
  width: 100%;
  z-index:9;
}
#header {
  top:0px;
}

.banner {
  height: 100vh;
  width: 100%;
  background-image: url("https://cdnb.artstation.com/p/assets/images/images/009/439/993/large/brody-bellon-background-space-sm.jpg?1519023411") !important;
  background-size: cover;
  z-index: -1;
}

.navbar-brand {
  font-family: 'Francois One', sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: white !important;
}

.navbar-nav {
  font-family: 'Francois One', sans-serif;
  font-size: 25px;
  text-align: right;
  color: white !important;
}
.nav-link {
  color: white !important; 
}
.nl1:hover {
  color: #9933ff !important;
  font-family: 'Monoton', cursive !important;
}
.nl2:hover {
  color: #ffcc00 !important;
  font-family: 'Monoton', cursive !important;
}

.sd1 {
  background-color: #ffcc00;
}
.sd2 {
  background-color: #9933ff;
}
.sdp1 {
  text-align: center;
  font-size: 40px;
  font-family: 'Oswald', sans-serif;
  color: black;
}
.sdp2 {
  text-align: center;
  font-size: 40px;
  font-family: 'Oswald', sans-serif;
  color: white;
}
.jumbotitle {
  font-family: 'Francois One', sans-serif;
  font-size: 130px;
  text-align: center;
  color: white;
}
.jumboparr {
  font-family: 'Oswald', sans-serif;
  font-size: 40px;
  text-align: center;
  color: white;
}

<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/estilo.css">
    <link href="https://fonts.googleapis.com/css?family=Acme|Fjalla+One|Francois+One|Oswald|Monoton" rel="stylesheet">
    <!-- Scroll Plugin de fullpage.js -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.css">
    <!-- This following line is only necessary in the case of using the option `scrollOverflow:true` -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/vendors/scrolloverflow.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.js"></script>

    <title>TEST</title>
  </head>

  <body>

   <div id="header">
    <!-- Menú de navegación -->
    <div class="navbar navbar-expand-lg">
      <a class="navbar-brand" href="#">BRAND TEST</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
     </button>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link nl2" href="home.html">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link nl1" href="#">Galeria</a>
    </li>
    <li class="nav-item">
      <a class="nav-link nl2" href="#">Noticias</a>
    </li>
    <li class="nav-item">
      <a class="nav-link nl1" href="#">Equipo</a>
    </li>
    <li class="nav-item">
      <a class="nav-link nl2" href="#">Contacto</a>
    </li>
     </ul>
      </div>
    </div> 
  </div>

  <div id="fullpage">
    <div class="section fp-auto-height" id="section0">
      <!-- Fin del menú de navegación -->
   <div class="banner">
     <div class="container">
       <div class="intro">
         <h1 class="jumbotitle">BRAND LOGO</h1> 
       <p class="jumboparr">¡Some text for information!</p>
       </div>
     </div>
   </div>
    </div>
    <div class="section" id="section1">
      <div class="slide sd1" id="slide1">
        <div class="container">
        <div class="row justify-content-center">
       <p class="sdp1">More info bla bla blaa </p>
       <p class="sdp1">The same info different color</p>
        </div>
        </div>
      </div>
      <div class="slide sd2" id="slide2">
        <div class="container">
        <div class="row justify-content-center">
          <p class="sdp2">¡Moooore infoooo lorem impsum! </p>
        </div>
      </div>
      </div>
    </div>
  </div>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->

  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  <script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
      anchors: ['firstPage', 'secondPage'],
      sectionsColor: ['#ffcc00', '#9933ff'],
      fixedElements: '#header'
    });
  </script>
</body>
</html>

Answer 2

您应该需要从 section0 中删除 "fp-auto-height" class。

Bootstrap 4 失去内容 fullPage.js

Bootstrap 4 losing content with fullPage.js

html

javascript

css

fullpage.js

bootstrap-4