滚动进度指示器不适用于 fullpage.js答案

【问题标题】：Scroll progress indicator not working with fullpage.js滚动进度指示器不适用于 fullpage.js
【发布时间】：2021-07-27 20:17:21
【问题描述】：

我对 Javascript 很陌生，我正在为自己创建一个新的投资组合网站。目前，我面临滚动进度指示器的问题。它不工作。在我添加 fullpage.js 之前它一直在工作。我在下面附上了我的代码，很想知道如何解决这个问题。

谢谢！！

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


    * {
  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


    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,

})

【问题讨论】：

控制台是否有任何错误？
嗨。它不会在控制台中显示任何错误 no :(
我在本地尝试了您的代码。它说它需要一个liceseKey。 prnt.sc/1gx6yaf
嗨。我有一个，拥有许可证密钥根本不会改变问题。

标签： javascript scroll fullpage.js

【解决方案1】：

您的滚动指示器依赖于页面的滚动位置。 fullPage.js 默认使用 CSS3 硬件加速动画，因此不会使用“可滚动”内容，而是使用 css3 过渡模拟滚动。

要解决此问题，请使用 fullPage.js 选项 scrollBar: true，如本例所示。 https://alvarotrigo.com/fullPage/examples/scrollBar.html

这里的代码： https://github.com/alvarotrigo/fullPage.js/blob/master/examples/scrollBar.html

【讨论】：

您是一位传奇先生。这为我解决了这个问题。
点击我的答案上的勾号，随时接受答案。这样其他人就可以将此识别为您的问题的解决方案:)
嗨，Alvaro 再次感谢您。最后一件事。我正在尝试实现进度指示器根据背景颜色改变颜色的方法。（例如，白色背景上的黑色进度指示器和黑色背景上的白色）
您可以使用 fullpage.js 回调与 JS 一起执行此操作，也可以使用 CSS state classes that fullpage.js provides 这样您就可以执行 .fp-viewing-page2-0 #nav{ color: red} 之类的操作；
再次感谢您的帮助。我还在玩 Javascript，所以我不知道从哪里开始。作为最后一个请求，您能给我举个例子吗？