[英]Scroll progress indicator not working with fullpage.js
I am quite new with Javascript and I am creating a new portfolio website for myself.我对 Javascript 很陌生,我正在为自己创建一个新的投资组合网站。 Currently I am facing an issue with the progress indicator on scroll.目前我正面临滚动进度指示器的问题。 It isn't working.它不起作用。 It was working until I added fullpage.js.在我添加 fullpage.js 之前它一直在工作。 I have attached my code below and would love to know how to fix this.我在下面附上了我的代码,很想知道如何解决这个问题。
Thank you!!谢谢!!
HTML HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Aaron</title>
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.4/TweenMax.min.js"></script>
</head>
<body>
<!-- Navigation -->
<!-- <header>
<h4 class="logo">LIGHT</h4>
</a>
<nav>
<ul>
<li><a href="#hero">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li> <a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header> -->
<div id="fullpage">
<div class="section one">
Section ONE
</div>
<div class="section two">
Section TWO
</div>
<div class="section three">
Section THREE
</div>
<div class="section four">
Section FOUR
</div>
</div>
<div class="progress-section">
<div class="progress-bar-wrap">
<div class="progress-bar"></div>
</div>
<div class="progress-num"></div>
</div>
<!-- Main Container Ends -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="scripts.js"></script>
</body>
</html>
CSS CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100%;
background-color:#111111;
color: white;
}
body::-webkit-scrollbar {
display: none;
}
.progress-section {
position: fixed;
right: 50px;
top: 40%;
width: 60px;
height: 20%;
display: flex;
justify-content: space-between;
wil-change: transform;
transition: 0.3s ease-out;
z-index: 1;
}
.progress-bar-wrap {
position: relative;
width: 3px;
border: 1px solid black;
border-radius: 10px;
overflow: hidden;
background-color: rgb(70, 70, 70);
}
.progress-bar {
position: absolute;
bottom: 0;
width: 100%;
height: 0%;
background-color: rgb(189, 189, 189);
}
/* .section {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
scroll-snap-align: start;
} */
.one {
background: gray;
}
.two {
background: dark gray;
}
.three {
background: blue;
}
.four {
background: purple;
}
Javascript Javascript
let progressSection = document.querySelector('.progress-section');
let progressBar = document.querySelector('.progress-bar');
let progressNum = document.querySelector('.progress-num');
let x,y;
function updateProgressBar(){
progressBar.style.height = `${getScrollPercentage()}%`;
progressNum.innerText = `${Math.ceil(getScrollPercentage())}%`
requestAnimationFrame(updateProgressBar)
}
function getScrollPercentage(){
return ((window.scrollY) / (document.body.scrollHeight - window.innerHeight)*100)
};
updateProgressBar()
;
new fullpage('#fullpage', {
licenseKey: 'My License Key :)',
autoScrolling: true,
})
Your scroll indicator relies on the scroll position of the page.您的滚动指示器依赖于页面的滚动位置。 fullPage.js by default uses CSS3 hardware-accelerated animations and therefore won't use "scrollable" content but rather simulate the scroll with css3 transitions. fullPage.js 默认使用 CSS3 硬件加速动画,因此不会使用“可滚动”内容,而是使用 css3 过渡模拟滚动。
To fix this use the fullPage.js option scrollBar: true
as in this example.要解决此问题,请使用 fullPage.js 选项scrollBar: true
如本例所示。 https://alvarotrigo.com/fullPage/examples/scrollBar.html https://alvarotrigo.com/fullPage/examples/scrollBar.html
Code here: https://github.com/alvarotrigo/fullPage.js/blob/master/examples/scrollBar.html代码在这里: https : //github.com/alvarotrigo/fullPage.js/blob/master/examples/scrollBar.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.