滚动页面和链接显示

Question

我在一个html页面上有几个div作为页面。我希望能够滚动页面和侧面的导航栏，当前隐藏的链接将取消隐藏，并显示用户当前所在页面的链接。以下是我的代码。

<nav class="dot-nav">
  <ul class="dot-nav--list list-unstyled">
    <li class="dot-nav--item is-active"><a href="readmore1.html#page0" class="dot-nav--link">Introduction</a></li>
    <li class="dot-nav--item"><a href="readmore1.html#page1" class="dot-nav--link">Smart Home</a></li>
    <li class="dot-nav--item"><a href="readmore1.html#page2" class="dot-nav--link">Smart Retail</a></li>
    <li class="dot-nav--item"><a href="readmore1.html#page3" class="dot-nav--link">Control Command Cockpit</a></li>
    <li class="dot-nav--item"><a href="#" class="dot-nav--link">Repellendus, veritatis, deserunt.</a></li>
  </ul>
</nav>

.dot-nav--link {
  position: absolute;
  top: 50%;
  visibility: hidden;
  transform: translate(-120%, -50%);
  width: 200px;
  padding: 5px 10px;
  opacity: 0;
  color: #111;
  background-color: #fff;
  transition: all .3s;
}
.dot-nav--link:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 0;
  height: 0;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent #fff;
  border-style: solid;
  transform: translateY(-50%);
}

我如何实际使用jquery / javascript来做到这一点？任何帮助表示赞赏。被困在这里已有一段时间了。