Прокрутка с помощью fullpagejs по фиксированным элементам

Question

Я пытаюсь создать веб-сайт с полным файломpage.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>