带有ui-tabs问题的fullpage.js

Question

My usecase is as below - I have horizontal tabs on top (that uses jquery-ui - ui-tabs)

First Second Third

Each tab is a hyperlink. When "second" Tab is clicked it pulls up a page where I use the fullpage.js That page has 3 sections. The first section pulls up with the 3 tabs on the top.

When user is scrolling, the second section shows up with part of first section on top(that height kind of matches the tab height in first section)

I do have scrollOverflow:true.

How do I fix that please.

It looks like this

Answer 1

Add the following styles:

body{
    padding: 0;
    margin: 0;
}
#tabs{
    padding: 0;
}
#tabs ul{
    z-index: 999;
    position: fixed;
    width: 100%;
}
.ui-tabs .ui-tabs-panel {
    padding: 50px 0 0 0;
}

Demo online