在固定元素上使用 fullpagejs 滚动

Question

我正在尝试设计一个 fullpage.js 的网站，其中包含覆盖部分屏幕的固定元素。问题是，当鼠标悬停在那些固定元素上时，滚动无法正常工作（参见 jsfiddle example）

这是我的 html:

<div class="hider" style="top: 0"></div>
<div id="fullpage">
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
</div>
<div class="hider" style="bottom: 0"></div>

这是我的 css:

body {
    text-align: center;
}
.section {
    font-size: 32px;
    background-color: #b3d4fc;
}
.hider {
    width: 100%;
    height: calc(50% - 20px);
    background-color: #3461ff;
    position: fixed;
    z-index: 1;
}

我希望能够在鼠标悬停在固定元素上并在智能手机或平板电脑上用手指在固定 div 上向上或向下滑动时进行滚动。我该怎么做？

Answer 1

只需将固定元素放在整页中 div 即可。

<div id="fullpage">
    <div class="hider" style="top: 0"></div>
    <div class="section">Section 1</div>
    <div class="section">Section 2</div>
    <div class="section">Section 3</div>
    <div class="hider" style="bottom: 0"></div>
</div>

在固定元素上使用 fullpagejs 滚动

Scrolling with fullpagejs over fixed elements

html

javascript

css

fullpage.js