set a general offset variable

[sylvainaerni]

This offset variable is useful when fullPage.js is wrapped into a bigger website, with an existing header is shifting all the scroll positions.

[alvarotrigo]

Thanks!
Could you provide a demo online for its use?

[sylvainaerni]

Hi Álvaro,

not yet unfortunately, we have a NDA with the client. But the site will be
online beginning of September, I'll share the link then.

I send you an image explaining rawly the structure, and I give you the code
dealing with the fullPage.js, hope it helps!

[image: Inline image 1]

var offsetHeight = $('#header').height();

$('#fullpage').fullpage({
anchors: ['welcome', 'timepieces', 'trailer', 'media'],
...
topOffset: offsetHeight,

    afterResize: function(){
        offsetHeight = $('#header').height();
        $(this).fullpage.setTopOffset(offsetHeight);
    }
  });

And BTW thank you very much for your great plugin :)

Cheers,
Sylvain

On Wed, Aug 19, 2015 at 3:08 PM, Álvaro notifications@github.com wrote:

Could you provide a demo online for its use?

—
Reply to this email directly or view it on GitHub
#1454 (comment)
.

Liip AG // Rue de la Banque 1 // CH-1700 Fribourg
Tel +41 26 422 25 11 // GPG 214E94A4 // www.liip.ch

[alexandretperez]

This feature would be great!

I'm working on a project that uses the ScrollMagic plugin "http://scrollmagic.io/" which basically uses offsets to trigger its events.

I'm doing some extra work to combine this two libraries.

[alvarotrigo]

@alexandretperez that has nothing to do with this topic. You should be using scrollBar:true in fullpage.js for it and load the library in the afterRender callback.

[alexandretperez]

@alvarotrigo I'm sorry, I wasn't clear enough.

I needed stop scrolling the sections at 60px from the top, but changing the css to do that also affects the bottom, overflowing in 60px because the wrapper has 100% of the viewport.

So I change the code adding the "offset" option with value 0 by default.

Then I change this:
var windowsHeight = $window.height();

To this:
var windowsHeight = $window.height() - options.offset;

and in the function "init()" I added:
if (options.offset) {
container.css("top", options.offset);
container.height(container.height() - options.offset);
}

This solved my needs.

Cheers,
Alexandre.

[edenworky]

Please add this. Right now the library assumes it's on the top level element, and requires ugly workarounds to work.

[alvarotrigo]

@edenworky maybe for the next release.

[bdkaat]

I also need an offset to land sections below my header.

[MikeiLL]

I too am wishing for this feature.

[passion4code]

I have another open PR for this concept.

#2420

[csimpi]

what's up with this? I've purchased this plugin but doesn't work with that very obvious reason we have a navbar on the top of the page, so every scroll gets bigger (100% window height + the navbar height 66px), so every section is 66px longer that the bottom of the screen. Very frustrating.

[alvarotrigo]

@csimpi have you considered using the paddingTop option so the fixed menu will be over the section but not taking any extra space?

[csimpi]

@alvarotrigo in my case I use Angular 8 and I have a main-menu component which has a <nav> container in the template with position: fixed. Since this is an Angular component it has a host element, so the fixed header is wrapped in the host html element. This pushed the whole site down and broke the full page's logic, the paddingTop didn't work.

Now I've refactored my code and added position: top to the host element, the paddingTop works well. But still it would be cool a feature when you add an element and its size would be subtracted from the 100% height.

[alvarotrigo]

Now I've refactored my code and added position: top to the host element, the paddingTop works well. But still it would be cool a feature when you add an element and its size would be subtracted from the 100% height.

Thanks for the feedback! ;)