<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全屏滾動</title>
<style>
.section {
text-align: center;
}
.section1 {
background-color: #ccc;
}
.section2 {
background-color: #058;
}
.section3 {
background-color: lightblue;
}
.section4 {
background-color: blue;
}
#header {
position: fixed; /*要固定定位才行*/
top: 0;
right: 200px;
background-color: red;
}
#fullPageMenu {
position: fixed;
top: 20px;
left: 10px;
color: #000;
/*background-color: #000;*/
z-index: 10;
}
#fullPageMenu li {
color: #000;
}
</style>
<link rel="stylesheet" href="./jquery.fullpage.css">
<script src="./jquery.js"></script>
<script src="./jquery.fullpage.js"></script>
</head>
<body>
<!-- 關(guān)于配置項menu -->
<ul id="fullPageMenu">
<li data-menuanchor="page1"><a href="#page1">section1</a></li>
<li data-menuanchor="page2"><a href="#page2">section2</a></li>
<li data-menuanchor="page3"><a href="#page3">section3</a></li>
<li data-menuanchor="page4"><a href="#page4">section4</a></li>
</ul>
<div id="header">head</div>
<div id="fullpage">
<div class="section section1">Some section1</div>
<div class="section section2">
<div class="slide" data-anchor="slide1">slide1</div>
<div class="slide" data-anchor="slide2">slide2</div>
<div class="slide" data-anchor="slide3">slide3</div>
<div class="slide" data-anchor="slide4">slide4</div>
</div>
<div class="section section3">Some section</div>
<div class="section section4">Some section</div>
</div>
<script>
$(document).ready(function() {
var options = {
//Navigation
menu: '#fullPageMenu',//綁定菜單，設(shè)定相關(guān)屬性與anchors值對應(yīng)后，菜單可以控制滾動
lockAnchors: false, // 開啟錨點
anchors:['page1', 'page2','page3','page4'],//錨點名稱
navigation: true,// 開啟主頁面導(dǎo)航，右側(cè)
navigationPosition: 'left',// 導(dǎo)航方位，只有右側(cè)、左側(cè)
navigationTooltips: ['firstSlide', 'secondSlide','aaa','bbb'],// 導(dǎo)航放上去的tips
showActiveTooltip: true,// 當(dāng)翻到當(dāng)前頁時是否顯示tooltips
slidesNavigation: true, // 子導(dǎo)航是否顯示
slidesNavPosition: 'bottom',// 子導(dǎo)航顯示方位 只有top、bottom兩個選項
//Scrolling
css3: true,
scrollingSpeed: 700, // 翻頁速度
autoScrolling: true,// 是否按插件本身方式滾動,false,會出現(xiàn)瀏覽器滾動條，而且不按頁滾動
fitToSection: false,
fitToSectionDelay: 1000,
scrollBar: false, // 是否顯現(xiàn)滾動條,按頁滾動和瀏覽器自帶滾動都有效
easing: 'easeInOutCubic',// 要引入jquery.easings插件
easingcss3: 'ease',
loopBottom: true,// 滾動到最底部是否連續(xù)滾動回頂部
loopTop: true,// 滾動到最頂部是否連續(xù)滾動回底部
loopHorizontal: true,// 橫向slider幻燈片是否循環(huán)滾動
continuousVertical: false,// 是否循環(huán)滾動,與loopBottom,loopTop不要同時設(shè)置
continuousHorizontal: false,
scrollHorizontally: false,
interlockedSlides: false,
resetSliders: false,
fadingEffect: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,//內(nèi)容超過滿屏后是否顯示滾動條,可用jquery.slimscroll插件模擬滾動條
scrollOverflowOptions: null,
touchSensitivity: 15,// 移動設(shè)備中滑動頁面的敏感性，越大越難滑動
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true,// 是否可以用方向鍵導(dǎo)航
animateAnchor: true,// 錨鏈接是否可以控制滾動動畫
recordHistory: true,//是否可以通過瀏覽器前進后退來記錄歷史,如果設(shè)置autoScrolling:false,此配置將被關(guān)閉
//Design
controlArrows: true,// 箭頭是否顯示
verticalCentered: true,//文本是否垂直居中
sectionsColor : ['#ccc', '#fff'],// 每一屏背景顏色
paddingTop: '3em',// 每個section頂部和底部padding
paddingBottom: '10px',// 如果需要頂部或底部菜單，那就可以改動這個值
fixedElements: '#header, .footer',//固定元素，需要配置jquery選擇器,頁面滾動時固定不動
responsiveWidth: 0,
responsiveHeight: 0,
responsiveSlides: false,
//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').fullpage(options);
});
</script>
</body>
</html>
