CODEWITHSUNDEEP
jqueryfullpage.js
Cook88
Cook88

Reputation: 756

Sticky header with fullpage.js

I'm working with fullpage.js on a site that has a sticky header. I want the fullpage sections to be 100vh minus the height of the sticky header so that the header is visible as the user scrolls through the sections, but the default functionality is just to make the sections 100vh no matter what. I looked into the offset extension, but that only allows for a percentage offset and I need the offset to be the exact pixel value of the header's height. Any ideas here?

Upvotes: 1

Views: 10537

Answers (2)

Wazeed
Wazeed

Reputation: 11

Yeah I have faced the same problem but I didn't find any solution. As an alternative what I did was I have shown header only on first section and to navigate from other sections I have enabled navigation tooltip option.

CSS:

.fp-viewing-* .header-wrapper{
        display:none;
        transition: all 1.1s ease-out;
}
.fp-viewing-home .header-wrapper{
        display:block;
        transition: all 1.1s ease-out;
}

JS:

new fullpage('#fullpage', {
    //options here
    navigation:true,
    anchors:['home','about','pricing','contact-us'],
    navigationTooltips:['Home','About','Pricing','Contact Us'],
    showActiveTooltip:true,
});

Upvotes: 0

kenny
kenny

Reputation: 1776

If found this fiddle: http://jsfiddle.net/6SQhb/514/

Which adds a header above the fullpage div:

<header id="header">
    <ul class="nav">
        <li> <a href="#home">home</a></li>
        <li><a href="#about">about</a></li>
    </ul>
</header>
<div id="fullpage">
....
</div>

With this Css: 

#header {
 width: 100%;
 background-color: #42403c;
 background: rgba(0, 0, 0, 0.7);
 position: fixed;
 height: 50px;
 top: 0;
 z-index: 99;
}

Dont forget to add this option:

$('#fullpage').fullpage({
  //other options here
  paddingTop: '50px'
});

You could also set a margin-top to the 'fullpage' div so you dont need to worry about the percentage. Hope that helps.

Upvotes: 1

Related Questions