近期的网站改版，需要采用全屏滑动的方式布局。于是就使用了fullpage插件。
因为fullpage是基于jquery，所以需要首先引入jquery，然后再引入fullpage.js。
$(‘#fullpage‘).fullpage({//调用fullpage元素 使用其方法设置参数
menu: ‘#menu‘, //网站导航菜单
anchors：[‘page1‘, ‘page2‘, ‘page3‘],//为每屏板块命名的锚链接
navigation: true,//是否显示导航按钮
scrollingSpeed:900,//屏幕滚动花费的时间 毫秒
fixedElements:‘.header‘,//固定class为header的元素 这里为栏目菜单
afterLoad：function(anchorLink,index){ //进入当前板块的函数 anchorLink为锚链接 index为索引值 从1开始
if(index==1){
$(‘#fp-nav ul li a span,.fp-slidesNav ul li a span‘).css(‘background-color‘,‘#fff‘);//把导航按钮背景色改成白色
}
},
onLeave:function(index,nextIndex,direction){//滚动前的函数 //index为索引值 nextIndex为将要滑到到板块的索引值 direction 判断是往上滚动还是往下 值是up或down
if(nextIndex==4){ //如果要滑到第四屏板块
$(‘.Service-wrap‘).addClass(‘animated‘);//为class为service-wrap的元素 添加class animated
??????????????? }else{
???????????????????? $(‘.Service-wrap‘).removeClass(‘animated‘);
}
})
html结构方面需要注意的是：如果底部不需要完整的一屏显示 添加class fp-auto-height 就可以。//底部高度自定义
fullpage.js使用指南
原文地址：https://www.cnblogs.com/xts6/p/9825101.html