Offset Top #2785
Description
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!