在 DOM 中滚动时更改不透明度

问：

IAM 尝试使用 opacity 0.1 启动我的页面并在滚动时将其设为 1

这是我的HTML 在这里，我尽力设计我的 div，使其在我滚动过去时以 1 的不透明度显示

<div class="the-sec-body" id="secbo">
  <div class="the-prog-scale">
    <div class="sec-circle">1</div>
    <div class="prog"></div>
    <div class="sec-circle">2</div>
    <div class="prog"></div>
    <div class="sec-circle">3</div>
    <div class="prog"></div>
    <div class="sec-circle">4</div>
    <div class="prog"></div>
    <div class="sec-circle">5</div>
  </div>
  <div class="the-secod-cards">
    <div class="thecard-secpage">
      <div class="theimage"></div>
      <div class="thecontent">
        <h1>Share your designs</h1>
        <h3>Determine costs and timeline...</h3>
        <p>
          We review your designs in detail and provide you with a
          fixed-price-breakdown for each page and a timeline for the project.
        </p>
      </div>
    </div>
    <div class="thecard-secpage">
      <div class="theimage"></div>
      <div class="thecontent">
        <h1>Begin development</h1>
        <h3>Begin building on Webflow...</h3>
        <p>
          If you’re happy with the price, we’ll start the work right away, by
          building each page across mobile, tablet and desktop..
        </p>
      </div>
    </div>
    <div class="thecard-secpage">
      <div class="theimage"></div>
      <div class="thecontent">
        <h1>Provide feedback</h1>
        <h3>Add the final polish...</h3>
        <p>
          Once we’re 80% of the way through to completion, we will share a link
          for you to review the website on a staging site and provide feedback.
        </p>
      </div>
    </div>
    <div class="thecard-secpage">
      <div class="theimage"></div>
      <div class="thecontent">
        <h1>Webflow training & support</h1>
        <h3>Learn how to use Webflow...</h3>
        <p>
          We provide you with post-30 day launch support and a library of
          personalised tutorials on how to use your new website so that you are
          well equiped to take control of the website
        </p>
      </div>
    </div>
    <div class="thecard-secpage">
      <div class="theimage"></div>
      <div class="thecontent">
        <h1>Launch new websites</h1>
        <h3>Release it to the world...</h3>
        <p>
          Once the website has been put through final testing, we will transfer
          the website to your own Webflow account and domain and launch the
          website on your desired date.
        </p>
      </div>
    </div>
  </div>
</div>

这是我的CSS

.the-top-div .h2-top-secpage {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 300%;
}
.the-top-div .para-top-secpage {
  font-size: 160%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.thesecondpage .the-sec-body {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.thesecondpage .the-sec-body .the-prog-scale {
  width: 25%;
  padding: 100px;
  height: inherit;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
}
.thesecondpage .the-sec-body .the-secod-cards {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: inherit;
}
.thesecondpage .the-sec-body .thecard-secpage {
  margin: 20px;
  width: 90%;
  flex: 2;
  padding: 40px;
  border: 3px solid white;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  opacity: 0.1;
}
.thesecondpage .the-sec-body .thecard-secpage p {
  font-size: 80%;
  text-wrap: wrap;
  opacity: 0.3;
}
.thesecondpage .the-sec-body .thecard-secpage .theimage {
  width: 200px !important;
  height: auto;
  background-image: linear-gradient(
    135deg,
    rgb(23, 22, 22) 15%,
    rgb(79, 76, 76)
  );
  margin-right: 20px;
  border-radius: 20px;
}
.thesecondpage .the-sec-body .the-prog-scale .sec-circle {
  border: 2px solid white;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  opacity: 0.1;
}
.thesecondpage .the-sec-body .the-prog-scale .prog {
  background-color: white;
  width: 3px;
  height: 230px;
  border-radius: 40px;
  opacity: 0.1;
}

这是我的 Java 脚本 我拿了我需要的元素，然后我尝试计算它的位置并使用 if 条件将其与我的滚动进行比较，但它不起作用

var secondBody = document.getElementById("secbo");
var secCir = document.querySelectorAll(".sec-circle");
var secProg = document.querySelectorAll(".prog");
var secCards = document.querySelectorAll(".thecard-secpage");
window.addEventListener("scroll", showEff);
function showEff() {
  var scrol = window.scrolled;
  secCir.forEach((circle) => {
    var s1 = circle.getBoundingClientRect().height;
    var s2 = circle.getBoundingClientRect().top;
    var s = s1 - s2;
    if (scrol < s) {
      circle.style.opacity = 0.1;
    } else if ((scrol = s / 2)) {
      circle.style.opacity = 0.4;
    } else if (scrol >= s) {
      circle.style.opacity = 1;
    }
  });
  secProg.forEach((progpar) => {
    var s1 = progpar.getBoundingClientRect().height;
    var s2 = progpar.getBoundingClientRect().top;
    var s = s1 - s2;
    if (scrol < s) {
      progpar.style.opacity = 0.1;
    } else if ((scrol = s / 2)) {
      progpar.style.opacity = 0.4;
    } else if (scrol >= s) {
      progpar.style.opacity = 1;
    }
  });
  secCards.forEach((card) => {
    var s1 = card.getBoundingClientRect().height;
    var s2 = card.getBoundingClientRect().top;
    var s = s1 - s2;
    if (scrol < s) {
      card.style.opacity = 0.1;
    } else if ((scrol = s / 2)) {
      card.style.opacity = 0.4;
    } else if (scrol >= s) {
      card.style.opacity = 1;
    }
  });
}