Offset Top

[Noodles2000]

I'm using the fullpage.js plugin for a website I'm building. All is good, and and after some tweaking in HMTL and CSS the plugin works how I want it to work. But, I've ran into a small problem I can't fix.

I'm running the slider in a container with a 100px header above. So the height of the #fullpage container/wrapper is always [the browser height] - 100px. With this the first problem occurred. The height of the slides were set to the browsers height instead of the container (for example the browsers height is 700px, and therefor my slides are, but the container is 600px). I've managed to fix this by overwriting the height of the slides, like this:

fp.section {
height: 100% !important;
}

I know it's dirty, but hey, it works. Until I added a hover effect on the container, which scales it by scale3d(1.015, 1015, 1015). This causes the container to scale, and mess up the scroll distance.

Long question in short: can I somehow set the code, so the scroll distance (transform: translate3d) to be 'fixed' (= [browserheight] - 100px)?

I'm calling the plugin by the following code with the following:

jQuery('#fullpage').fullpage({
    navigation: false,
    easing: 'easeInOutQuart',
    css3: true,
    easingcss3: 'cubic-bezier(0.77, 0, 0.175, 1)',
    scrollingSpeed: 800,
    fitToSection: false,
    verticalCentered:false
    });
});

Many many thanks!

[alvarotrigo]

Long question in short: can I somehow set the code, so the scroll distance (transform: translate3d) to be 'fixed' (= [browserheight] - 100px)?

Not possible. The most you can do is use the paddingTop option.

See this pull request.

[rodrigo-arias]

@alvarotrigo Do you have plans to implement this sometime soon? I would think this is a common configuration although this feature request has been open for more than 6 years. Thanks

[alvarotrigo]

@rodrigo-arias no plans as of the moment, but I might consider it at some point :)
So far, you can use paddingTop to overcome the issue.

The OffSet Sections extension is also kind of related, although it tackles another use case.