在固定元素上滚动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

只需将固定元素放在fullpage 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>