jQuery-fullPage.js插件学习笔记

发表于 | 分类于

学习 jQuery-fullPage.js 插件已经两天，参照网上的案例仿造了一个“魅族Note2官网”网页，中间出了很多问题，不过最终还是被我做出来了。主要问题有包括：

  • 内容超出section导致无法全屏
  • 没有更新到最新的fullpage.js导致fp-auto-height不能使section高度自适应（网站header和footer）
  • 没有做不同分辨率下的样式适配（即@media），使网页在不同大小的屏幕上显示效果相差较大。

最后，使用onLeave()写了一个控制二级网站顶部二级导航条滑动显示/隐藏的js动画。效果展示

简介

jQuery-fullPage.js 是一个用于实现全屏滚动的jQuery插件，很多高端大气的网页都是使用这个插件完成的。

插件的主要功能：

  • 支持鼠标滚动
  • 支持前进后退和键盘控制
  • 多个回调函数
  • 支持手机、平板触摸事件
  • 支持 CSS3 动画
  • 支持窗口缩放
  • 窗口缩放时自动调整
  • 可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

兼容性

  • 浏览器：fullPage.js 支持 IE8+ 及其他现代浏览器
  • jQuery版本：兼容 jQuery 1.7+ 版本

使用方法

引入文件

  • 该插件需要jQuery库支持，所以需要先引入jQuery库，然后再引入fullPage.js库

  • 另外别忘了在head标签中引入 jquery.fullPage.css样式文件

  • 注释的代码属于进阶的知识，一般情况下使用不到，大家可根据需要自行引入

1
2
3
4
5
6
7
8
9
10
11
<link rel="stylesheet" href="css/jquery.fullPage.css">
<script src="js/jquery.min.js"></script>
<!-- jquery.easings.min.js 用于 easing 参数，也可以使用完整的 jQuery UI 代替，如果不需要设置 easing 参数，可去掉改文件 -->
<!-- <script src="js/jquery.easings.min.js"></script> -->
<!-- 如果 scrollOverflow 设置为 true，则需要引入 jquery.slimscroll.min.js，一般情况下不需要 -->
<!-- <script src="js/jquery.slimscroll.min.js"></script> -->
<script src="js/jquery.fullPage.js"></script>

html代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="fullgage">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>

每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”，如：

1
2
<div class="section active">

同时，可以在 section 内加入 slide，如：

1
2
3
4
5
6
7
8
9
10
11
12
<div id="fullgage">
    <div class="section page1">第一屏</div>
    <div class="section page2">第二屏</div>
    <div class="section page3">
        <div class="slide">第三屏的第一屏</div>
        <div class="slide">第三屏的第二屏</div>
        <div class="slide">第三屏的第三屏</div>
        <div class="slide">第三屏的第四屏</div>
    </div>
    <div class="section page4">第四屏</div>
</div>

JavaScript代码

1
2
3
4
5
6
7
8
$(function(){
    var $mlNav = $('.ml-nav');
    $('#fullpage').fullpage({
        navigation: true, //右侧小点点导航
        anchors:["page1","page2","page3","page4"], //锚文本，使浏览器的前进后退键生效，地址栏链接可以直接定位到内页（section）
    });
});

以上是最简单的fullpage初始化代码，你也可以加入更多的选项，例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
$(document).ready(function() {
$('#fullpage').fullpage({
//Navigation
menu: false,
lockAnchors: false,
anchors:['firstPage', 'secondPage'],
navigation: false,
navigationPosition: 'right',
navigationTooltips: ['firstSlide', 'secondSlide'],
showActiveTooltip: false,
slidesNavigation: true,
slidesNavPosition: 'bottom',
//Scrolling
css3: true,
scrollingSpeed: 700,
autoScrolling: true,
fitToSection: true,
scrollBar: false,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
//Accessibility
keyboardScrolling: true,
animateAnchor: true,
recordHistory: true,
//Design
controlArrows: true,
verticalCentered: true,
resize : false,
sectionsColor : ['#ccc', '#fff'],
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsiveWidth: 0,
responsiveHeight: 0,
//Custom selectors
sectionSelector: '.section',
slideSelector: '.slide',
//events
onLeave: function(index, nextIndex, direction){},
afterLoad: function(anchorLink, index){},
afterRender: function(){},
afterResize: function(){},
afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){}
});
});

fullPage.js插件配置参数说明

1、配置参数，可以在fullpage的方法内使用，例如前面「 JavaScript代码 」中的navigation:truenavigation: true

选项 类型 默认值 说明
verticalCentered 字符串 true 内容是否垂直居中
resize 布尔值 false 字体是否随着窗口缩放而缩放
slidesColor 函数 无 设置背景颜色
anchors 数组 无 定义锚链接
scrollingSpeed 整数 700 滚动速度，单位为毫秒
easing 字符串 easeInQuart 滚动动画方式
menu 布尔值 false 绑定菜单，设定的相关属性与 anchors 的值对应后，菜单可以控制滚动
navigation 布尔值 false 是否显示项目导航
navigationPosition 字符串 right 项目导航的位置，可选 left 或 right
navigationColor 字符串 #000 项目导航的颜色
navigationTooltips 数组 空 项目导航的 tip
slidesNavigation 布尔值 false 是否显示左右滑块的项目导航
slidesNavPosition 字符串 bottom 左右滑块的项目导航的位置，可选 top 或 bottom
controlArrowColor 字符串 #fff 左右滑块的箭头的背景颜色
loopBottom 布尔值 false 滚动到最底部后是否滚回顶部
loopTop 布尔值 false 滚动到最顶部后是否滚底部
loopHorizontal 布尔值 true 左右滑块是否循环滑动
autoScrolling 布尔值 true 是否使用插件的滚动方式，如果选择 false，则会出现浏览器自带的滚动条
scrollOverflow 布尔值 false 内容超过满屏后是否显示滚动条
css3 布尔值 false 是否使用 CSS3 transforms 滚动
paddingTop 字符串 0 与顶部的距离
paddingBottom 字符串 0 与底部距离
fixedElements 字符串 无  
normalScrollElements 无    
keyboardScrolling 布尔值 true 是否使用键盘方向键导航
touchSensitivity 整数 5  
continuousVertical 布尔值 false 是否循环滚动，与 loopTop 及 loopBottom 不兼容
animateAnchor 布尔值 true  
normalScroll…hold 整数 5  

参数详细说明：

controlArrows

默认值：true，决定是否使用控制箭头向左或向右移动幻灯片。

verticalCentered

默认值：true，决定是否初始化后，是否垂直居中网页的内容，如果你想自定义元素的位置，那么你可以设置为false，在插件初始化后调用afterrender回调函数加载其它的脚本库设置你网页的内容。

resize

默认值：true，是否在窗口改变大小后，自动调整网页中字体的大小。

scrollingSpeed

默认值：700，每个屏幕滚动动画执行的时间，时间的单位为毫秒（ms）。

sectionsColor

默认值：none，定义每个section的CSS背景演示，例如下面的代码：

1
2
3
4
$('#fullpage').fullpage({
  sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

如果设置的参数不对称，比如屏幕个数多余设置的颜色个数，那么多余的屏幕默认没有背景颜色，如果屏幕个数少于设置的颜色个数，那么多余的颜色将不显示。

anchors

默认值：[]，定义导航的锚文本信息例如（#example），每个导航文本之前用英文逗号（,）分隔，快速导航的锚文本URL也是使用的这个文本，浏览器通过此锚文本链接可以支持前进和后退按钮功能。

此选项的设置还可以作为用户的书签，当用户打开带有锚文本的URL时，Fullpage可以自动跳转到对应的section屏幕或者slide幻灯片位置。

注意，如果你使用了此选项，那么网页中不能有相同的ID，一来Fullpage插件无法准确的定位到section屏幕或者slide幻灯片位置，二来这也有悖网页中CSS的编写规范。

lockAnchors

默认值：false，确定是否在URL中的锚点将在插件有任何影响。你仍然可以使用锚内部自己的函数和回调，但他们不会有任何作用，在网站的滚动。如果你想把fullpage.js在URL使用锚其他插件。

注意，这样的设置有助于了解anchors选项在侧边栏菜单的对应关系，与类的元素的值。通过.section它在标记的位置。

easing

默认值：easeInOutCubic，定义了用于垂直和水平滚动的过渡效果，它要求文件vendors/jquery.easings.min.js或者jQuery UI插件，具体的动画效果你可以参考 easings插件介绍 ，你也可以使用其它的动画插件库。

easingcss3

默认值：ease，定义在滚动屏幕中使用css3:true设置的过度效果，你可以使用 CSS3 transition-timing-function 属性 自定义多个动画效果，例如：linear、ease-out、……，或者使用cubic-bezier方法创建自定义的动画效果，你可能想要使用 Matthew Lein CSS Easing Animation Tool 创建这个。

loopTop

默认值：false，定义屏幕滚动到第一个后，是否循序滚动到最后一个。

loopBottom

默认值：false，定义屏幕滚动到最后一个后，是否循环滚动到第一个。

loopHorizontal

默认值：true，定义水平的幻灯片是否循环切换。

css3

默认值：true，确定是否使用JavaScript和CSS3转换滚动在切片和幻灯片。加快平板电脑和移动设备的浏览器支持CSS3的运动有益。如果此选项设置为true，浏览器不支持CSS3，jQuery回调函数将被替代。

autoScrolling

默认值：true，定义屏幕是否自动滚动，还是需要用户触发事件滚动，它也影响了部分适合在平板电脑和手机浏览器/设备窗口。

fitToSection

默认值：true，设置是否自适应整个窗口的空间，以某个section的内容为分界线，设置为true时，某个的section将填充到整个页面，否者用户可以停留在网页的任何位置。

scrollBar

默认值：false，定义是否使用浏览器默认的滚动条，如果使用浏览器默认的滚动条，autoScrolling配置任然生效，用户也可以自由滚动的网站与滚动条和fullpage.js将适合的部分在屏幕滚动时完成。

paddingTop

默认值：0，定义每个section固定的头部留白，例如设置paddingBottom: ’10px’、 paddingBottom: ’10em’、……，在使用固定表头的情况下有用的。

fixedElements

默认值：null，定义的某个元素是否在网页的固定位置，元素将被关闭的插件是必要的时候，使用CSS3的选项保持滚动结构固定。它需要对这些元素的jQuery选择器字符串。例如：fixedElements: ‘#element1, .element2’。

normalScrollElements

默认值：null，如果你想避免自动滚动，滚动时的一些元素，这是你需要使用的选项。（有用的地图，滚动div等）需要对这些元素的jQuery选择器字符串。例如：normalScrollElements: ‘#element1, .element2’。

normalScrollElementTouchThreshold

默认值：5，定义了一个数字，测试HTML标签树的机构，是否在在移动设备上支持触摸事件。

keyboardScrolling

默认值：true，定义是否可以通过键盘箭头事件控制section的滚动。

touchSensitivity

默认值：5，定义了浏览器窗口的宽度/高度的百分比，多远的触摸滑动可以跳转到下一个section / slide。

continuousVertical

默认值：false，定义向下滚动到最后一节是否应该向下滚动到第一个，如果向上滚动的第一部分应该滚动到最后一个。不兼容loopTop和loopBottom选项。

animateAnchor

默认值：true，定义当网页的URL中有锚文本的时候，是否帮用户定位到对应的section或者slide。

recordHistory

默认值：true，定义是否将网页滚动的的状态纪录到浏览器的历史记录中。

当设置为true时，每一个section/slide滚动的状态将纪录到浏览器的历史纪录中，这样的设置有利于用户方便回退到刚才浏览的内容。
当设置为false时候，用户的浏览路径不会记录到浏览器的历史纪录中，如果要取消这个选项可以使用autoScrolling:false。

默认值：false，一个选择器可以用来指定要与滚动互动的导航菜单，有点类似与Bootstrap的滚动监听。这样到滚动到某个section时，对应的菜单会被自动添加active类。

注意，这个选项不会自动生成一个导航菜单，仅仅是给指定的菜单中当前菜单项添加一个active活动类。

为了让自定义导航菜单和屏幕section互动，需要给菜单添加一个HTML5的自定义属性（data-menuanchor），需要和锚文本设置相同的内容，例如下面的示例代码：

1
2
3
4
5
6
7
8
9
10
11
<ul id="myMenu">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
</ul>
$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

注意：注意这个自定义的菜单代码应该放置到插件设置的内容外面，避免因为排版不兼容问题可以使用css3:true，否则将被附加到body的插件本身。

默认值：false，如果设置为true，那他将会显示一个小圆圈组成的快速导航栏。

默认值：none，结合参数navigation一起使用，用于设置navigation定义的菜单显示的位置，可以设置为left/right。

默认值：[]，定义当navigation设置为true的时候，鼠标移动到快速导航上面的提示文本，每个属性中间用英文半角逗号（,）隔开。

showActiveTooltip

默认值：false，设置是否自动显示navigationTooltips中设置的工具提示文本。

slidesNavigation

默认值：false，使用方法同navigation，不过这个参数设置的导航显示位置不同，而且这个是用户设置幻灯片的。

slidesNavPosition

默认值：bottom，定义slidesNavigation中设置的导航菜单显示的位置，可选的设置值为top/bottom，你可能要修改CSS样式确定的距离从顶部或底部以及任何其他风格如颜色。

scrollOverflow

默认值：false，设置当内容超过屏幕的高度的时候，是否裁切多余的内容。

当设置为true时，你的内容将会被自动裁切，可以考虑当afterRender回调函数调用的时候，处理你的内容的多少或者使用其它的插件库合理的处理多余的内容。
当设置为false时，插件不会自动裁切多余的内容，但是剩下没有显示的内容任然不能显示，此时，你可以使用 jquery.slimscroll.min插件来自定义滚动事件，如果要使用这个插件，应该在Fullpage插件之前引入，例如下面的代码：

1
2
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>

sectionSelector

默认值：.section，定义用于选择全屏滚动内容的jQuery选择器。它可能需要改变，有时为了避免与其他插件使用相同的选择器作为整版的问题。

slideSelector

默认值：.slide，定义用于插件幻灯片jQuery选择器。它可能需要改变，有时为了避免与其他插件使用相同的选择器fullpage.js问题。

responsiveWidth

默认值：0， A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s width is less than 900 the plugin will scroll like a normal site.

responsiveHeight

默认值：0， A normal scroll (autoScrolling:false) will be used under the defined height in pixels. A class fp-responsive is added to the plugin’s container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser’s height is less than 900 the plugin will scroll like a normal site.

fullPage.js插件方法函数

名称 说明
moveSectionUp() 向上滚动
moveSectionDown() 向下滚动
moveTo(section, slide) 滚动到
moveSlideRight() slide 向右滚动
moveSlideLeft() slide 向左滚动
setAutoScrolling() 设置页面滚动方式，设置为 true 时自动滚动
setAllowScrolling() 添加或删除鼠标滚轮/触控板控制
setKeyboardScrolling() 添加或删除键盘方向键控制
setScrollingSpeed() 定义以毫秒为单位的滚动速度

插件方法使用说明

moveSectionUp()

设置section向上滚动

$.fn.fullpage.moveSectionUp();

moveSectionDown()

设置section向下滚动

$.fn.fullpage.moveSectionDown();

moveTo(section, slide)

设置屏幕滚动到某个section或者slide，两个参数都是某个内容块的索引值或者是锚文本，默认情况下slide的索引被设置为0。

1
2
3
4
5
6
7
8
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.moveTo('firstSlide', 2);
 
//Scrolling to the 3rd section in the site
$.fn.fullpage.moveTo(3, 0);
 
//Which is the same as
$.fn.fullpage.moveTo(3);

silentMoveTo(section, slide)

这个函数的用法和MoveTo方法完全一样，只是MoveTo在切换的时候有动画效果，而silentMoveTo方法在切换的时候没有动画效果，直接跳转到对应的section中。

1
2
/*Scrolling to the section with the anchor link `firstSlide` and to the 2nd Slide */
$.fn.fullpage.silentMoveTo('firstSlide', 2);

moveSlideRight()

设置幻灯片向右滑动，将下一个幻灯片显示在当前的屏幕中。

$.fn.fullpage.moveSlideRight();

moveSlideLeft()

设置幻灯片向左滑动，将上一个幻灯片显示在当前的屏幕中。

$.fn.fullpage.moveSlideLeft();

setAutoScrolling(boolean)

可以实时的控制页面滚动的方式，可选的参数false/true。

  • 如果参数被设置为true，所有的section将自动滚动。
  • 如果参数被设置为false，所有的section将不会自动滚动，需要用户手动或者使用浏览器的滑条滚动网页。

注意，scrollOverflow参数如果设置为true，它可能很难滚动鼠标滚轮或触摸板当部分滚动.

$.fn.fullpage.setAutoScrolling(false);

setFitToSection(boolean)

该函数设置选项fitToSection确定是否自适应section在屏幕上。

$.fn.fullpage.setFitToSection(false);

setLockAnchors(boolean)

设置选项lockAnchors确定将锚文本锁定到URL中。

$.fn.fullpage.setLockAnchors(false);

setAllowScrolling(boolean, [directions])

添加或者禁止Fullpage自动绑定的鼠标滑轮和移动触摸事件，不过用户任然可以通过键盘和点击快速导航的方式切换section/slide。要取消键盘事件你应该使用setKeyboardScrolling方法。

  • directions，可选参数，可以设置的值：all, up, down, left, right或者设置组合的参数，例如down, right，他设置的两个方向上将禁止或者激活滚动。
1
2
3
4
5
6
7
8
//disabling scrolling
`$.fn.fullpage.setAllowScrolling(false);` 
//disabling scrolling down
$.fn.fullpage.setAllowScrolling(false, 'down');
 
//disabling scrolling down and right
$.fn.fullpage.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(boolean, [directions])

添加或者禁止键盘对section/slide的控制，这个事件是默认绑定的。

  • directions，可选参数，可以设置的值：all, up, down, left, right或者设置组合的参数，例如down, right，他设置的两个方向上将禁止或者激活键盘的滚动。
1
2
3
4
5
6
7
8
9
//disabling all keyboard scrolling
$.fn.fullpage.setKeyboardScrolling(false);
 
//disabling keyboard scrolling down
$.fn.fullpage.setKeyboardScrolling(false, 'down');
 
//disabling keyboard scrolling down and right
$.fn.fullpage.setKeyboardScrolling(false, 'down, right');

setRecordHistory(boolean)

定义是否为每个URL的变更纪录到浏览器中的历史记录中。

$.fn.fullpage.setRecordHistory(false);

setScrollingSpeed(milliseconds)

定义每个section/slide滚动的时间，默认的时间单位为毫秒（ms）。

$.fn.fullpage.setScrollingSpeed(700);

destroy(type)

移除Fullpage的事件和添加的HTML/CSS样式风格，理想的使用在使用Ajax加载内容。

  • type：可以被设置为空字符，或者all，如果一旦执行，通过Fullpage添加的HTML/CSS样式和代码都将会被移除，将显示没有使用Fullpage的样式，一个使用过任何插件进行修改。
1
2
3
4
5
//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
 
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

reBuild()

更新DOM结构以适应新的窗口大小或其内容。理想的使用与Ajax调用或外部网站的DOM结构的变化组合。

$.fn.fullpage.reBuild();

资源延时加载

fullpage.js提供了一种懒加载图像，视频和音频元素，所以他们不会放慢您的网站加载或不必要的浪费数据传输。使用延迟加载时，所有这些元素只会加载时进入视口。启用延迟加载，所有你需要做的是改变你的src属性的data-src如下图所示：

1
2
3
4
5
<img data-src="image.png">
<video>
  <source data-src="video.webm" type="video/webm" />
  <source data-src="video.mp4" type="video/mp4" />
</video>

fullPage.js插件回调函数

3、函数

名称 说明
afterLoad 滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数，anchorLink 是锚链接的名称，index 是序号，从1开始计算
onLeave 滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数：index 是离开的“页面”的序号，从1开始计算；nextIndex 是滚动到的“页面”的序号，从1开始计算； direction 判断往上滚动还是往下滚动，值是 up 或 down。
afterRender 页面结构生成后的回调函数，或者说页面初始化完成后的回调函数
afterSlideLoad 滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数
onSlideLeave 某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数

插件回调函数使用说明

滚动到某一屏后的回调函数，接收 anchorLink 和 index 两个参数。

  • anchorLink 是锚链接的名称
  • index 是section的索引，从1开始计算

在没有设置锚文本的情况下，只有使用唯一的index参数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$('#fullpage').fullpage({
	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
	afterLoad: function(anchorLink, index){
		var loadedSection = $(this);
		//using index
		if(index == 3){
			alert("Section 3 ended loading");
		}
		//using anchorLink
		if(anchorLink == 'secondSlide'){
			alert("Section 2 ended loading");
		}
	}
});

onLeave (index, nextIndex, direction)

滚动前的回调函数，接收 index、nextIndex 和 direction 3个参数

  • index 是离开的“页面”的序号，从1开始计算；
  • nextIndex 是滚动到的“页面”的序号，从1开始计算；
  • direction 判断往上滚动还是往下滚动，值是 up 或 down。
1
2
3
4
5
6
7
8
9
10
11
12
$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        var leavingSection = $(this);
        //after leaving section 2
        if(index == 2 &amp;&amp; direction =='down'){
            alert("Going to section 3!");
        }
        else if(index == 2 &amp;&amp; direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

取消section的滚动

你可以在onLeave 回调函数中返回false，那么将取消滚动。

1
2
3
4
5
6
7
8
9
$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction){
        //it won't scroll if the destination is the 3rd section
        if(nextIndex == 3){
            return false;
        }
    }
});

afterRender()

这个回调函数只是在生成页面结构的时候调用。这是要用来初始化其他插件或删除任何需要的文件准备好代码的回调（这个插件修改DOM创建得到的结构）。

1
2
3
4
5
6
7
$('#fullpage').fullpage({
    afterRender: function(){
        var pluginContainer = $(this);
        alert("The resulting DOM structure is ready");
    }
});

afterResize()

这个回调函数在窗口发生大小改变的时候被调用，就在部分调整。

1
2
3
4
5
6
$('#fullpage').fullpage({
    afterResize: function(){
        var pluginContainer = $(this);
        alert("The sections have finished resizing");
    }
});

滚动到某一水平滑块后的回调函数，与 afterLoad 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

  • anchorLink: anchorLink corresponding to the section.
  • index: index of the section. Starting from 1.
  • slideAnchor: anchor corresponding to the slide (in case there is)
  • slideIndex: index of the slide. Starting from 1. (the default slide doesn’t count as slide, but as a section)
    在没有anchorlinks的幻灯片或幻灯片SlideIndex参数是唯一使用定义的情况下。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 
    afterSlideLoad: function( anchorLink, index, slideAnchor, slideIndex){
        var loadedSlide = $(this);
 
        //first slide of the second section
        if(anchorLink == 'secondPage' &amp;&amp; slideIndex == 1){
            alert("First slide loaded");
        }
 
        //second slide of the second section (supposing #secondSlide is the
        //anchor for the second slide
        if(index == 2 &amp;&amp; slideIndex == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

某一水平滑块滚动前的回调函数，与 onLeave 类似，接收 anchorLink、index、slideIndex、direction 4个参数。

  • anchorLink: anchorLink corresponding to the section.
  • index: index of the section. Starting from 1.
  • slideIndex: index of the slide. Starting from 0.
  • direction: takes the values right or left depending on the scrolling direction.
  • nextSlideIndex: index of the destination slide. Starting from 0.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$('#fullpage').fullpage({
    onSlideLeave: function( anchorLink, index, slideIndex, direction, nextSlideIndex){
        var leavingSlide = $(this);
 
        //leaving the first slide of the 2nd Section to the right
        if(index == 2 &amp;&amp; slideIndex == 0 &amp;&amp; direction == 'right'){
            alert("Leaving the fist slide!!");
        }
 
        //leaving the 3rd slide of the 2nd Section to the left
        if(index == 2 &amp;&amp; slideIndex == 2 &amp;&amp; direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

取消slide滑动

你可以设置回调函数onSlideLeave 返回false，那么他将阻止此次的滑动事件，就像onLeave一样。




常见问题

能否自定义某个Section的高度？
这个需求一般出现在页面的顶部或者是底部，默认情况下，一个Section的内容会自动填充整个屏幕，如果你想要某个Section自适应内容的高度，你可以给它添加一个fp-auto-height类，例如下面的示例代码。

1
2
3
<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动画不会叠加在一起执行，这也是比较合乎逻辑的。

无法全屏（屏幕底部可以看到下一屏幕的内容）？
1、检查每个section的内容时候有超出屏幕的，特别是使用了绝对定位，检查top、left、bottom、top设置的值时候让内容超出了当前的section。

2、检查靠边（上下左右）元素的line-height是否为0，可以将line-height:0;设置为0看看时候解决问题。

3、另外，可以通过逐个将section的代码注释的方法，找到有问题的section，从而缩小问题的范围。

设置了fp-auto-height为何不生效？
很可能是你的fullpage不是最新版的，建议到作者的github上直接下载或使用git克隆下来。fullpage官网github地址

不同分辨率的屏幕显示效果不同？
解决这更替，可以通过@media指定不同屏幕下的样式。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@media screen and (min-width:1920px) {
    .page1 { background: url(../images/bg1.jpg) center 0 no-repeat;}
    .page2 { background: url(../images/bg2.jpg) center 0 no-repeat;}
    .page3 { background: url(../images/bg3.jpg) center 0 no-repeat;}
    .page4 { background: url(../images/bg4.jpg) center 0 no-repeat;}
    .page5 { background: url(../images/bg5.jpg) center 0 no-repeat;}
    /*.page6 { background: url(../images/bg6.jpg) center 0 no-repeat;}*/
    .page7 { background: url(../images/bg7.jpg) center 0 no-repeat;}
    .page9 { background: url(../images/bg9.jpg) center 0 no-repeat;}
    
    .page2-img{
      margin-top: 100px;
      margin-left: -720px;
    }   
    省略...
}
@media screen and (max-width:1440px) {
    .cnc { background: url(../images/bg3-xs.jpg) center 0 no-repeat;}
    省略...
}

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.

参考文档

1、fullpage插件官方github地址

2、fp-auto-height属性官方demo（底部可选择其他demo）

3、jQuery全屏滚动插件fullPage.js-源码下载

4、fullPage.js制作魅蓝note2页面-实例教程

5、fullpage入门指南-超详细教程