常见问题
Parallax doesn’t work with fullpage.js.
Short answer: use the scrollBar:true option for fullPage.js or autoScrolling:false if you don’t want to use the auto-scrolling feature.
Explanation: Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
jQuery scrollTop function doesn’t work
Same answer as Parallax doesn’t work with fullpage.js
jQuery scroll event doesn’t work
Same answer as Parallax doesn’t work with fullpage.js
Also, consider using the callbacks provided by fullpage.js such as afterLoad, onLeave, afterSlideLeave and onSlideLeave detailed in the docs or the class added to the body element containing the active section/slide.
Is it possible to hide the address bar in mobile phones on landscape
Short answer: on Apple iOS you can do that by avoid using the anchors option of fullPage.js.
Explanation: each browser acts in a different way on this matter and it is not possible right now to control the behavior of the address bar by using javascript. You can try to take a look at different meta tags.
Lazyload doesn’t work
Short answer: use the scrollBar:true option for fullPage.js. Otherwise, you can make use of the callbacks provided by fullPage.js such as onLeave, onSlideLeave, afterLoad, afterSlideLoad and afterRender to load images. One of those techniques is explained in this comment.
Explanation: Lazyload techniques , as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript. fullPage.js doesn’t actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.
My other plugins don’t work when using fullPage.js
Short answer: initialize them in the afterRender callback of fullPage.js.
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
My javascript/jQuery events don’t work anymore when using fullPage.js
Short answer: if you are using options such as verticalCentered:true or overflowScroll:true in fullPage.js initialization, or even horizontal slides, then you will have to treat your selectors as dynamic elements and use delegation. (by using things such as on from jQuery). Another option is to add your code in the afterRender callback of fullpage.js
Explanation: if you are using options such as verticalCentered:true or overflowScroll:true of fullPage.js or even horizontal slides, your content will be wrapped inside other elements changing its position in the DOM structure of the site. This way, your content would be consider as “dynamically added content” and most plugins need the content to be originally on the site to perform their tasks. Using the afterRender callback to initialize your plugins, fullPage.js makes sure to initialize them only when fullPage.js has stopped changing the DOM structure of the site.
How can I set fullscreen videos / backgrounds
Short answer: this has nothing to do with fullPage.js but with CSS knowledge. You should try to find your answers in Google or places such as stackoverflow.com.
Explanation: fullpage.js provides some examples with full backgrounds and full video backgrounds but it has nothing to do with the use of fullPage.js. It is all about CSS.
Fullpage.js jumps one section
Short answer: as detailed in the documentation:
Be careful! data-anchor tags can not have the same value as any ID element on the site (or NAME element for IE).
Explanation: there’s no way to avoid the browser’s behavior towards the use of anchors in the URL (#) when an element with the id or name attribute exists in the DOM with the exact same value.
Is it possible to scroll automatically through sections / slides?
Short answer: Yep. Check this video tutorial for the automatic vertical scroll or this topic for the horizontal one.
能否自定义某个Section的高度？
这个需求一般出现在页面的顶部或者是底部，默认情况下，一个Section的内容会自动填充整个屏幕，如果你想要某个Section自适应内容的高度，你可以给它添加一个fp-auto-height类，例如下面的示例代码。
<div class="section">Whole viewport</div> <div class="section fp-auto-height">Auto height</div>
JavaScript代码无需修改，Fullpage会自动获取这个高度并设置给元素。
滑动卡顿不流畅？
滑动卡顿不流畅，这个问题可能跟硬件有关，Fullpage可以支持JS动画和CSS动画，而据我观察JS动画总是有些卡，而CSS动画就很流畅，可能跟浏览器硬件平台有关系，所以尽量选择CSS动画作为页面过度的动画效果。
还有一点Fullpage默认绑定了鼠标的滑轮和键盘的上下左右键，当一个动画未执行完成时，再操作这个按键是无效的，Fullpage动画不会叠加在一起执行，这也是比较合乎逻辑的。