Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

set a general offset variable #1454

Open
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

sylvainaerni
Copy link

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
Copy link
Owner

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

@sylvainaerni
Copy link
Author

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 [email protected] 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
Copy link

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
Copy link
Owner

@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
Copy link

@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
Copy link

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

@alvarotrigo
Copy link
Owner

@edenworky maybe for the next release.

@bdkaat
Copy link

bdkaat commented Jul 13, 2016

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

@MikeiLL
Copy link

MikeiLL commented Nov 18, 2016

I too am wishing for this feature.

@passion4code
Copy link
Contributor

I have another open PR for this concept.

#2420

@alvarotrigo alvarotrigo mentioned this pull request Jul 7, 2017
@csimpi
Copy link

csimpi commented Jan 8, 2020

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
Copy link
Owner

alvarotrigo commented Jan 8, 2020

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

@csimpi
Copy link

csimpi commented Jan 9, 2020

@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
Copy link
Owner

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! ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

8 participants