CODEWITHSUNDEEP
javascriptjqueryfullpage.js
Bruno Monteiro
Bruno Monteiro

Reputation: 712

How to make non-scrolling elements be still visible on fullPage.js

I'm using fullPage.js (which is a great plugin) to create a photo gallery page. The problem is that this page has a header and a footer, they're not fixed, but they need to appear on this page. What should I do?

I already tried normalScrollElements, but with no success so far.

My structure is:

[header - not fixed]

[scrollable content]

[footer - not fixed]

Any ideas?

Upvotes: 3

Views: 566

Answers (2)

Alvaro
Alvaro

Reputation: 41595

The plugin is a full page plugin as its name says. You won't be able to have a header and a footer which you can reach by scrolling unless those are full page.

Make your header and your footer fixed or add the header in the first section and the footer in the last one. (absolute positioned to a relative section)

Upvotes: 0

Lyncee
Lyncee

Reputation: 112

the property that you try to use is not planned for that:

normalScrollElements: (default null) If you want to avoid the auto scroll when scrolling over some elements, this is the option you need to use. (useful for maps, scrolling divs etc.) It requires a string with the jQuery selectors for those elements. (For example: normalScrollElements: '#element1, .element2')

It just prevent the scroll of your content page if this one also contains a div with a scroll.

I used a bit this plugin and it am pretty sure it scales on your browser window resolution (its a fullpage plugin after all), best advice for you should to put your header/footer in fixed position or as Jonas said, duplicate your header and footer in each section, but they will scroll with the content pages :/

Upvotes: 1

Related Questions