使锚导航与多个粘性部分一起工作

Question

我想制作一个单页网站，在向下滚动时粘性部分会相互覆盖。那部分有效。我无法使用锚点进行点导航，因为所有部分都相互重叠。

是否可以使用 javascript 进行这项工作。

我用我想要的简单版本制作了一个代码笔。

这是代码：

body {
  margin: 0px;
  padding: 0px;
  scroll: behavior smooth;
}

section {
  position: sticky;
  width: 100%;
  height: 100vh;
  top: 0;
  display: inline-block;
  box-sizing: border-box;
}

.text {
  font-size: 40px;
  font-weight: 600;
  text-align: center;
  padding-top: 20vh;
  height: 100%;
}

.gray {
  background-color: #5c5d5f;
}

.red {
  background-color: #e31426;
}

.scroll-control {
  position: fixed;
  right: 70px;
  top: 40%;
  transform: translateX(-50%);
  z-index: 700;
}

.scroll-control>a>span {
  cursor: pointer;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin: 30px 0;
}

.scroll-control>a>span:hover {
  opacity: 1;
}

.inactive {
  background-color: #000;
  opacity: 0.7;
}

.current {
  opacity: 1;
  background-color: #000;
  transform: scale(1.5);
}

<ul class="scroll-control">
  <a href="#1"><span class="one current"></span></a>
  <a href="#2"><span class="two inactive"></span></a>
  <a href="#3"><span class="three inactive"></span></a>
  <a href="#4"> <span class="four inactive"></span></a>
  </a>
</ul>

<section id="1" class="panel gray">
  <div class="text">SECTION 1</div>
</section>
<section id="2" class="panel red">
  <div class="text">SECTION 2</div>
</section>
<section id="3" class="panel gray">
  <div class="text">SECTION 3</div>
</section>
<section id="4" class="panel red">
  <div class="text">SECTION 2</div>
</section>