当div超过窗口的50％时，请更改圆圈的颜色

Question

我想更改圆圈的颜色。我现在有一个点导航，我想更改圆圈的颜色。我想当例如我的3 div的窗口超过50％时，第3个圆圈用白色填充。 HTML，CSS或Javascript是否可以实现？

PS：“我的页面”为黑色，其他div网站的构建方式与我与您共享的网站完全一样

.site {
  background: #FF7878;
  width: 100%;
  height: 100vh;
}

.site1 {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #74AACC;
}

.sitenav {
  transform: rotate(-90deg);
  overflow: hidden;
  position: fixed;
  margin-top: 32em;
}

.dot {
    height: 1.5em;
    width: 1.5em;
    border: 3px solid #fff;
    border-radius: 50%;
    float: right;
    margin-bottom: 2em;
    margin-right: 2em;
    
}

<nav>
  <div class="sitenav">

    <a href="#start">
      <div class="dot" id="first"></div>
    </a>

    <a href="#2">
      <div class="dot" id="second"></div>
    </a>

    <a href="#3">
      <div class="dot" id="third"></div>
    </a>

    <a href="#4">
      <div class="dot" id="fourth"></div>
    </a>

    <a href="#5">
      <div class="dot" id="fifth"></div>
    </a>

    <a href="#6">
      <div class="dot" id="sixth"></div>
    </a>

    <a href="#end">
      <div class="dot" id="seventh"></div>
    </a>

  </div>
</nav>

<div class="t" id="t1">Startseite</div>
<div class="t" id="t2">2.Seite</div>
<div class="t" id="t3">3.Seite</div>
<div class="t" id="t4">4.Seite</div>
<div class="t" id="t5">Journal</div>
<div class="t" id="t6">6.Seite</div>
<div class="t" id="t7">Ende</div>

<div class="site" id="2">
  <h1 class="title">Welcome to my Website!</h1>
</div>

<div class="site1" id="3">
  <div class="bg"></div>
  <div class="bg bg2"></div>
  <div class="bg bg3"></div>
  <h1 class="title">Welcome to my Website!</h1>
</div>

<div class="site" id="4">
  <h1 class="title">Welcome to my Website!</h1>
</div>