【发布时间】：2015-04-17 05:15:27
【问题描述】：
我有一个学校项目的截止日期快到了，但我遇到了一个问题。将 ScrollBar 设置为 true 后，我的 fullpage.js 水平滑块停止工作。
如果我将它设置回 false 它可以工作，但我希望滚动条在那里。网站上带有滚动条的示例完美运行。
http://alvarotrigo.com/fullPage/examples/normalScroll.html
我一生都无法弄清楚为什么我的不再工作了。我感觉我缺少一个命令，但我仍然是 jQuery 的初学者。
如果可以的话请帮忙:)
非常感谢。
我的网址是：http://cultureboard.noahalexfarr.com/#firstPage
下面是我的 HTML
<!DOCTYPE html>
<html>
<head>
<title>Items of my Life</title>
<meta charset="utf-8">
<link rel='shortcut icon' href='favicon.ico' type='image/x-icon'>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is optional. Only necessary if you use the option css3:false and you want to use other easing effects rather than "linear", "swing" or "easeInOutCubic". -->
<script src="js/jquery.easings.min.js"></script>
<!-- This following line is only necessary in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="js/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script src="http://use.edgefonts.net/arizonia:n4:all.js"></script>
<script>
function parallax(){
var prlx_lyr_1 = document.getElementById('prlx_lyr_1');
var prlx_lyr_2 = document.getElementById('prlx_lyr_2');
var prlx_lyr_3 = document.getElementById('prlx_lyr_3');
var prlx_lyr_4 = document.getElementById('prlx_lyr_4');
var prlx_lyr_5 = document.getElementById('prlx_lyr_5');
var prlx_lyr_6 = document.getElementById('prlx_lyr_6');
prlx_lyr_1.style.top = (window.pageYOffset / 3)+'px';
prlx_lyr_2.style.top = -(window.pageYOffset / 4)+'px';
prlx_lyr_3.style.top = (window.pageYOffset / 6)+'px';
prlx_lyr_4.style.top = -(window.pageYOffset / 8)+'px';
prlx_lyr_5.style.top = -(window.pageYOffset / 12)+'px';
prlx_lyr_6.style.top = (window.pageYOffset / 3)+'px';
}
window.addEventListener("scroll", parallax, false);
</script>
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
sectionsColor: ['#1B2126', '#394D59', '#3E768C', '#41A8BF', '#9BEAF2'],
css3: true,
slidesNavigation: true,
slidesNavPosition: 'bottom',
scrollingSpeed: 2000,
autoScrolling: true,
fitToSection: true,
scrollBar: true,
easing: 'easeInOutCubic',
easingcss3: 'ease',
loopBottom: false,
loopTop: false,
loopHorizontal: true,
continuousVertical: false,
normalScrollElements: '#element1, .element2',
scrollOverflow: false,
touchSensitivity: 15,
normalScrollElementTouchThreshold: 5,
controlArrows: true,
verticalCentered: true,
resize : false,
paddingTop: '3em',
paddingBottom: '10px',
fixedElements: '#header, .footer',
responsive: 0,
navigation: true,
anchors: ['firstPage', 'secondPage', 'thirdPage' , 'fourthPage' , 'fifthPage'],
navigationPosition: 'right',
navigationTooltips: ['First page', 'Second page', 'Third page' , 'Fourth page', 'Fifth page'],
slidesNavigation: true,
slidesNavPosition: 'bottom'
});
});
</script>
</head>
<body>
<div id="fullpage">
<div id="prlx_lyr_1"></div>
<div id="prlx_lyr_2"></div>
<div id="prlx_lyr_3"></div>
<div id="prlx_lyr_4"></div>
<div id="prlx_lyr_5"></div>
<div id="prlx_lyr_6"></div>
<div class="section" id="section0">
<h1>Welcome to my world</h1>
<h3>The story of the items that define me</h3>
</div>
<div class="section" id="section1">
<h2>My goal</h2>
<p>When I set out to create my culture board. I wanted to choose the items that best represented me as a whole.</p>
<p>I choose objects that fell into 4 categories and arranged them accordingly:</p>
<ul id="list">
<li>Hobbies/Interests</li>
<li>Snacks</li>
<li>Work</li>
<li>Soccer</li>
</ul>
<p>I played around with a number of different patterns before settling on my final arrangement. </p>
<p>My creative process is labeled below:</p>
</div>
<div class="section" id="section2">
<div class="slide" data-anchor="slide1">
<h2>Overview</h2>
<img src="images/slide1.jpg" alt="set up">
</div>
<div class="slide" data-anchor="slide2">
<h2>An earlier configuration</h2>
<img src="images/slide2.jpg" alt="close up">
</div>
<div class="slide" data-anchor="slide3">
<h2>Coins from various countries</h2>
<img src="images/slide3.jpg" alt="coins">
</div>
<div class="slide" data-anchor="slide4">
<h2>Clearly I love Flippy Floppies</h2>
<img src="images/slide4.jpg" alt="feet">
</div>
<div class="slide" data-anchor="slide5">
<h2>Soccer helps me think</h2>
<img src="images/slide5.jpg" alt="soccer face">
</div>
</div>
<div class="section" id="section3">
<h2>The final step</h2>
<p>After my culture board was complete I took it into Adobe After Effects to add motion.</p>
<p>In addition I keyed out my Ipad screen and put a video of me crushing Dortmund as Arsenal!</p>
<p>Finally, I recorded a voice over in audition to finish it off!</p>
<img class="edit" src="images/final1.jpg" alt="feet">
</div>
<div class="section" id="section4">
<h2>What it all adds up to</h2>
<video poster="images/knolling.jpg" controls>
<source src="videos/knollingvideo.mp4" type='video/mp4'/>
<source src="videos/knollingvideo.webm" type='video/webm'/>
</video>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： jquery slider fullpage.js