堆栈内存溢出
  简体   繁体   English

Bootstrap 4使用fullPage.js丢失内容

[英]Bootstrap 4 losing content with fullPage.js

 原文  2018-07-10 06:47:00  5   2    javascript/ html/ css/ bootstrap-4/ fullpage.js

问题描述

Well basically my problem is that when I'm scrolling down when using the fullPage.js, I loose the content of my 'Section0, I don't know if it is the lack of sleep but I can't find the problem, I'm linking the codepen so you can try it live, thanks in advance! 好吧，基本上我的问题是，当我使用fullPage.js向下滚动时，我松开了“ Section0”的内容，我不知道这是否是睡眠不足，但我找不到问题，我正在链接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 码笔

2 个解决方案

解决方案1
 0 已采纳  2018-07-10 07:57:24

I think the problem is .banner {height:800px;} . 我认为问题是.banner {height:800px;} 。 If you change it, for example, in height:100vh you can see your content. 如果您将其更改为例如height:100vh ，则可以看到您的内容。

https://codepen.io/anon/pen/mjdPpz 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>

解决方案2
 0  2018-07-10 08:09:18

您应该从第0节中删除“ fp-auto-height”类。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 使用fullpage.js进行引导 - Bootstrap with fullpage.js 在fullpage.js中使用bootstrap手风琴 - use bootstrap accordion in fullpage.js 引导程序不与fullpage.js彼此相邻 - bootstrap not next to each other with fullpage.js fullPage.js，内容div放置不正确 - fullPage.js, content div not properly placed 而不是整页fullpage.js？ - not so fullpage fullpage.js? 菜单 Fullpage.js - Menu Fullpage.js Fullpage.js 和轮播 - Fullpage.js and carousel FullPage.JS滚动 - FullPage.JS Scrolling Fullpage.js定制 - Fullpage.js customization fullPage.js不滚动 - fullPage.js not scrolling
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM