进度指示器颜色根据部分背景颜色更改 (fullpage.js)答案

【问题标题】：Progress Indicator color change depending on the section background color (fullpage.js)进度指示器颜色根据部分背景颜色更改 (fullpage.js)
【发布时间】：2026-02-04 15:35:01
【问题描述】：

我的代码中导入了一个 fullpage.js 和一个进度条指示器 (div class="progress-section")。我的问题是，如何根据部分的背景颜色更改进度条指示器？（例如，当部分背景颜色为白色时，进度指示器为黑色，当部分 bg 为黑色时，指示器为白色。）我非常感谢你们:)

我已添加以下代码：

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 type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/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 class="progress-section">
    <div class="progress-bar-wrap" data-bg="fuchsia">
      <div class="progress-bar" ></div>
    </div>

    <div class="progress-num"></div>

  </div>

<div>




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


  <!-- 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 {
  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;
  will-change: transform;
  transition: 0.3s ease-out;
  z-index: 1;
}

.progress-bar-wrap {
  position: relative;
  width: 1px;
  border: 0;
  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);
}

.white {
  background: white;

}


.one {
  background: gray;

}

.two {
  background: green;

}

.three {
  background: blue;

}

.four {
  background: purple;

}
#fullpage {
  height: 1000px;
}

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: 'LICENSE',
  autoScrolling: true,
  scrollBar: true,
})

【问题讨论】：

我对fullpage.js一无所知，它需要一个密钥，所以我什至无法复制你的代码
嗨，史蒂夫，除非商业用途，否则 fullpage.js 不需要许可证。 fullpage.js 基本上是一个插件，它可以让你以整页的方式平滑滚动。
有趣。因为当我尝试运行您的代码时，出现以下错误：fullPage: Fullpage.js version 3 has changed its license to GPLv3 and it requires a 'licenseKey' option. Read about it here:github.com/alvarotrigo/fullPage.js#options
嗨，史蒂夫，是的，我以前在没有许可证密钥的情况下使用它。

标签： javascript fullpage.js

【解决方案1】：

您可以为此使用fullpage.js state classes。

例如：

/* On section 2 slide 0 */
.fp-viewing-page2-0 #nav{ 
   color: red
}

这是一个工作示例： https://codepen.io/alvarotrigo/pen/VwbxbYR

【讨论】：