fullpage js - 不要修改模板中单个元素的高度

Question

我正在使用 fullpagejs。

很好，但我希望能够保持某些元素的大小不变。

基本上，这是我得到的简单布局：

<?php get_header(); ?>
  <div class="container fullscreen body" id="fullpage">
    <!-- Section 1 -->
    <div class="fullscreen-background fullpagescroll bg-position-bottom">...
    <!-- Section 2 -->
    <div class="fullscreen-background fullpagescroll bg-position-bottom">...
    <!-- Section 3 -->
    <div class="fullscreen-background fullpagescroll bg-position-bottom">...
    <!-- Section 4 -->
    <div class="fullscreen-background fullpagescroll bg-position-bottom">...
    <!-- Section 5 -->
    <div class="fullscreen-background fullpagescroll bg-position-bottom short">...
  </div>
<?php get_footer(); ?>

基本上，每个部分都是全屏的，里面有内容。

这是整页的 javascript 部分：

  $('#fullpage').fullpage({
    normalScrollElements: '#section5',
    sectionSelector: '.fullpagescroll',
    autoScrolling: true
  });

我的问题是，在我的模板中，第 5 节 + 页脚是页面的全尺寸，但现在，有了库，它发生了变化，第 5 节是全屏的，页脚根本不显示（我无法滚动过去的部分5)

有什么方法可以保持 #section5 高度不变但仍然可以滚动吗？

我试过：

将 #section5 移动到父 div 之外，其中整页初始化为 (#fullpage)
将页脚移到里面 #section5
使用fixedElements: '#section5'
使用 normalScrollElements: '#section5'

但不幸的是，none 这次尝试对我有用。

关于如何实现这一点有什么建议吗？

PS: 我知道还有 WordPress 主题（很明显我正在开发一个 WordPress 主题），但是在这个阶段（基本上已经完成）我不能也不会想要更改为预制的 WordPress 模板以能够使用该库的功能。

在此先感谢大家。

Answer 1

阅读有关 how to use smaller or bigger sections and check the online example 的文档。

<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

如果您更喜欢按百分比定义它，请尝试 offset sections extension。

fullpage js - 不要修改模板中单个元素的高度

fullpagejs - dont modify height of one single element in the template

fullpage.js