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
  });

我的问题是，在我的模板中，section5 + footer是页面的全尺寸，但现在，随着库的更改，第5部分全屏，页脚根本不显示（我无法滚动到第5部分）

有没有办法保持#section5高度不变，但仍能滚动？

我试过了：

将#section5移动到初始化为fullpage的父div之外（#fullpage）
在#section5
使用fixedElements: '#section5'
使用normalScrollElements: '#section5'

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

有关如何实现这一目标的任何建议吗？

PS：我知道还有WordPress主题（很明显我正在开发一个WordPress主题），但是在这个阶段（它已基本完成）我不能和我不想改为前制作WordPress模板，以便能够使用此库的功能。

提前感谢所有人。

Answer 1

阅读有关how to use smaller or bigger sections的文档，然后查看online example。

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

如果您希望按百分比定义，请尝试offset sections extension。

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

1 个答案: