CODEWITHSUNDEEP
javascripthtmlcssfullpage.js
Hawkings
Hawkings

Reputation: 533

Scrolling with fullpagejs over fixed elements

I am trying to design a website with fullpage.js that contains fixed elements covering part of the screen. The problem is that when the mouse is over those fixed elements the scrolling does not work properly (see jsfiddle example)

This is my 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>

And this is my 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;
}

I want to be able to scroll while the mouse is over the fixed elements and with a smartphone or tablet swiping up or down with my finger over the fixed divs. How can I do that?

Upvotes: 1

Views: 829

Answers (1)

Joel Almeida
Joel Almeida

Reputation: 8037

Just place the fixed elements inside the fullpage div and it will work.

<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>

Upvotes: 3

Related Questions