Question

我已经在fullPage.js的帮助下开发了自己的网站。现在，我要在视口中同时包含2个部分（即最新部分和页脚）。我已经将“ fp-auto-height”类应用于页脚的高度，但是现在，该插件将页脚作为单独的部分。因此，页脚仅在完全向下滚动时可见。我只希望页脚与最新部分一起显示。我该怎么办？

Codepen

var myFullpage = new fullpage('#fullpage', {
  //Accessibility
	keyboardScrolling: true,
  
	//Custom selectors
	sectionSelector: '.section',
	slideSelector: '.slide',

	lazyLoading: true,

});

/******************************
STANDARD BLUE COLOR: #007DCF
STANDARD PURPLE COLOR: #662483
******************************/

/******************************
GENERAL
https://codepen.io/anon/pen/WyBxxK
******************************/
* { 
  margin: 0;
  padding: 0; 
}

a {
  text-decoration: none;
}

/******************************
HEADER + NAV
******************************/

nav {
  background-color: #FFF;
  position: fixed;
  width: 100%;
  top: 0;
  height: 70px;
  line-height: 70px;
  z-index: 999;
}

#logo {
  position: absolute;
  left: 70px;
  top: 50%;
  height: 40px;
  transform: translate(-50%,-50%);
}

#logotext {
  height: 35px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.pull-right {
  float: right;
  position: absolute;
  right: 30px;
}

li {
  display: inline;
  text-transform: uppercase;
  font-size: 18px;
  padding: 7px;
  font-family: 'Noto Sans';
}

li a {
  color: #007DCF;
}

/******************************
CONTENT
******************************/
#content-home {
  background-color: #1597E0;
}

#content-about {
  background-color: #67DD1D;
}

#content-portfolio {
  background-color: #B81E4E;
}

#content-contact {
  background-color: #662483;
}

.footer {
  margin: 50px;
}

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>RNDevelopment | Home</title>
	  <link rel="stylesheet" type="text/css" href="assets/css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Noto+Sans" rel="stylesheet">
    <link rel="shortcut icon" href="assets/img/favicon.ico"/>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.css"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.1/fullpage.js"></script>
  </head>

  <body>
	  <nav>
      <img id="logo" alt="Logo" src="assets/img/logo std.png"/>
      <img id="logotext" alt="Logotext" src="assets/img/naam foto blauw.png"/>
      <ul class="pull-right">
	      <li><a href="#home">Home</a></li>
        <li><a href="#about">About Me</a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact Me</a></li>
      </ul>
	  </nav>
      
    <div id="fullpage">
	    <div class="section" id="content-home" data-anchor="home">&nbsp;</div>
	    <div class="section" id="content-about" data-anchor="about">&nbsp;</div>
	    <div class="section" id="content-portfolio" data-anchor="portfolio">&nbsp;</div>
	    <div class="section" id="content-contact" data-anchor="contact">&nbsp;</div>
      <div class="section fp-auto-height"><p class="footer">Footer</p></div> 
    </div>
    
    <script src="assets/js/fullscroll.js"></script>
  </body>
</html>

提前谢谢！罗伯·尼克曼斯（Rob Nickmans）

fullPage.js插件：视口中有2个部分

0 个答案: