所以我在我的页面上实现了fullpage.js,除了一件事外,一切似乎都在工作:
当我从页面底部滚动并向上工作时,页面似乎选择使用部分的底部(而不是部分的顶部)作为键盘滚动的参考。因为我故意包括长的部分(比整页更长,我想保留)这意味着当我在长部分下方滚动,然后回到它们时,显示器落在下半部分(而不是这些长节的上半部分。这是不可取的。
我的问题:
1)我是否正确确定fullpage.js正在使用这些幻灯片的底部作为从页面底部向上滚动的参考?
和
2)你们中的任何人都知道我可以实现的一个修复程序,它允许我从下面滚动时使插件滚动到上一张幻灯片的顶部,而不是将前一部分的底部对齐到我的底部屏幕?
我认为这是一个问题,其他希望保留长篇章节的人也可能会面对,所以任何帮助都不仅会受到我的尊重,也会得到其他人的高度赞赏。 这是一个link to fullpage.js:
以下是codepen:http://codepen.io/ihatecoding/pen/grgaxr
以下是我的fullpage.js设置:
$('#fullpage').fullpage({
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#1bbc9b', '#4BBFC3', '#7BAABE'],
scrollBar: true,
fitToSection:false,
sectionSelector: 'section',
scrollingSpeed: 300,
paddingTop: '100px',
verticalCentered:true,
fixedElements: '#headerCont'
});
这是我的HTML(如果需要,可以在codepen上看到CSS):
<html>
<head>
<title>Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<article>
<div id = "fullpage">
<div id= "headerCont">
<div id = "header">
<div id="topWrapper"></div>
<table id="lastRow" class="home">
<tr>
<td id ="finalCell">
</td>
</tr>
</table>
</div>
</div>
<section>
<h1 class="divider">Section1</h1>
<div id = "about" class = "mainSub">
<div id="mainImage" class="imgDiv introCell">
</div>
<div id = "nameTitle" class="introCell">
</div>
</div>
</section>
<section>
<div id = "previews" class = "mainSub">
<!-- <section> -->
<h1 class="divider">Section2</h1>
<div class="grid bg eCell">
<div class="gridContent">
<div class="gridTable">
<div class="gridTable-cell">
Stuff<br>1
</div>
</div>
</div>
</div>
<div class="grid bg stemCell">
<div class="gridContent">
<div class="gridTable">
<div class="gridTable-cell stem">
Stuff<br>2
</div>
</div>
</div>
</div>
<div class="grid bg eCell">
<div class="gridContent">
<div class="gridTable">
<div class="gridTable-cell">
Stuff<br>3
</div>
</div>
</div>
</div>
<div class="grid bg stemCell">
<div class="gridContent">
<div class="gridTable">
<div class="gridTable-cell stem">
Stuff<br>4
</div>
</div>
</div>
</div>
</div>
<!-- </section> -->
</section>
<section>
<div id = "contactDiv" class = "mainSub">
<!-- <section> -->
<h1><a name="contact" class="anchor">Section3</a></h1>
<div id = "contactInfo" class = "contactContentWrapper sectionContentWrapper">
<div = "phoneDiv" class = "contactMethodDiv">
<span id="PhoneTitle" class = "contactTitle">Phone:</span><a href="tel:5555555555"><span>555 555 5555 </span></a>
</div>
</div>
<!-- </section> -->
</div>
</section>
<section>
<div id="staffDiv">
<h1>Section4</h1>
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
<div id="staffDiv">
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
<div id="staffDiv">
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
<div id="staffDiv">
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
<div id="staffDiv">
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">persond</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
<div id="staffDiv">
<ul id ="staffPlural">
<li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff">
<span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person
</div></li><li class ="staff"><span class="tf"></span><div class="tf2">person</div>
</li><li class ="staff"><span class="tf"></span><div class="tf2">person</div></li>
</ul>
</div>
</section>
<section id="footerSection">
<div id = "eFooter" class = "footer areaSub">
<div id = "eFooterContentWrapper" class = "footerContentWrapper sectionContentWrapper">
<ul id="eFooterList" class ="footerList">
<li><a>footerA</a></li>
<li><a>footerB</a></li>
<li><a>footerC</a></li>
</ul>
</div>
</div>
</section>
</div>
</article>
</body>
</html>