How to make non-scrolling elements still visible in fullPage.js
I am using fullPage.js (which is a great plugin) to create a photo gallery page. The problem is that this page has a header and footer, they are not fixed, but they should appear on this page. What should I do?
I've already tried normalScrollElements
it but haven't had any success so far.
My structure:
[header - not fixed]
[scrolling content]
[footer - not fixed]
Any ideas?
source to share
the property you are trying to use is not planned for this:
normalScrollElements: (default null) If you want to avoid auto scrolling when scrolling through some elements, this is the option you should use. (useful for maps, scrolling divs, etc.). It requires a string with jQuery selectors for these elements. (For example: normalScrollElements: '# element1, .element2')
It just prevents your content from scrolling if it also contains a scrollable div.
I've used this plugin a bit and I'm pretty sure it scales to your browser window resolution (it is a full fledged plugin after all), the best advice for you is to put your header / footer in a fixed position, or, as Jonas said, duplicate yours header and footer in each section, but they will scroll with content pages: /
source to share
The plugin is a full page plugin , as its name says. You will not be able to get the header and footer that you can achieve by scrolling if they are not a full page.
Make your header and footer fixed, or add a header in the first section and a footer in the last. (absolute position of the relative section)
source to share