Jesus Christ Jesus Christ - 1 month ago 9x
CSS Question

fullPage.js scroll to fixed header

I have a page with a horizontal navigation on top and above that is a header img. I'm using fullPage.js as my layout and by default navbar is always on top. I want my header img to appear only on the first section and be hidden everywhere else. I was thinking about a solution in jQuery which would be if I'm on every section but first header margin-top would be

and when I get to section one it would return to

My header markup right now:

<div id="header_banner">
<ul id="nav_cont">
<li data-menuanchor="section1">
<a id="home_hover" href="#section1">Home</a>
<li data-menuanchor="section2">
<a id="about_hover" href="#section2/1">About</a>
<li data-menuanchor="section3">
<a id="gallery_hover" href="#section3">Gallery</a>
<li data-menuanchor="section4">
<a id="literature_hover" href="#section4">Literature</a>
<li data-menuanchor="section5">
<a id="contact_hover" href="#section5">Contact</a>
<div id="fullpage">
<div class="section" id="Home">
<div class="container"></div>
other sections

This is what I want to end up with:

enter image description here


I would recommend you to do it with CSS directly. Check out this video tutorial in which you can see how to use the class added to the body element to fire your own CSS changes.

Otherwise, you can also do it using callbacks such as afterLoad or onLeave. You have an example of it available in the fullpage.js files.

You even have an example of how to use them in this Apple demo also available in the files to download.