在非全屏元素上使用fullPage.js插件？

Question

我的页面上有一个元素，从页面顶部100px扩展到底部200px。它是页面宽度的100％。

我希望以幻灯片的形式将内容放在此处，以便可以使用fullPage.js滑动它们。问题是这个元素不占用整个页面，而fullPage.js要求元素占用整个页面。

有没有解决这个问题的方法？

Answer 1

您可以通过执行以下操作来覆盖内联样式：

.section{
   height: auto !important;
}

您可以尝试使用课程fp-auto-height provided by fullpage.js并在您的部分中使用它：

<div class="section fp-auto-height">

这样，这些样式将应用于该部分：

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

该类的目的通常是处理小于视口的部分，例如页脚。但如果你愿意的话，你也可以将它用于更大的部分。