Javascript I'；我试图在一个页面上改变我的点导航的颜色，因为他们使用js中的节id从一个节移动到另一个节

我已经找到了很接近的例子，但它们都使用精确的px来确定变化点。我的站点是响应性的，因此所需的更改点不会被固定

出于这个原因，我认为我最好的选择是使用sectionid标签来确定变更点

我的导航html：

<div id="nav" class="dotstyle dotstyle-fillup">
    <nav>
      <ul>
        <li class="current">
          <a href="#about" class="nav-dot tooltip-effect">
            <span class="tooltip-content">
              <i>About</i>
            </span>
          </a>
        </li>
        <li>
          <a href="#services" class="nav-dot tooltip-effect">
            <span class="tooltip-content">
              <i>Services</i>
            </span>
          </a>
        </li>
        <li>
          <a href="#service_area" class="nav-dot tooltip-effect">
            <span class="tooltip-content tooltip-content-area">
              <i>Service Area</i>
            </span>
          </a>
        </li>
        <li>
          <a href="#gallery" class="nav-dot tooltip-effect">
            <span class="tooltip-content">
              <i>Gallery</i>
            </span>
          </a>
        </li>
        <li>
          <a href="#contact" class="nav-dot tooltip-effect">
            <span class="tooltip-content">
              <i>Contact</i>
            </span>
          </a>
        </li>
      </ul>
    </nav>
  </div><!-- #nav -->

---

如果您将所有相关代码添加到一个fiddle中，并指出您所面临的问题，这将非常有用。好的，我加入了fiddle，这里有一个链接，指向我代码的带条回写。我只是保留了重要的组件。谢谢

#nav {
 right: 0px;
 height: 100vh;
 height: 100%;
 position: fixed; 
}

#nav nav {
 width: 80px;
 position: relative;
 top: 50%;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

#nav li {
 line-height: 0px;
 padding: 24px 20px;
}

.nav-dot {
 padding: 0 10px;
 border: 2px solid white;
 border-radius: 50%;
}

.tooltip-content {
 position: absolute;
 margin-top: -15px;
 letter-spacing: 0.053em;
 padding: 14px;
 right: 70px;
 text-align: center;
 border-radius: 14px;
 opacity: 0;
 cursor: default;
 pointer-events: none;
}

.tooltip-content-area {
 width: 110px;
}

.tooltip-content i {
 opacity: 0;
}

.nav-dot:hover .tooltip-content,
.nav-dot:hover .tooltip-content i {
 opacity: 1;
}

.tooltip-effect .tooltip-content {
 -webkit-transform: scale3d(0,0,1);
 transform: scale3d(0,0,1);
 -webkit-transform-origin: 50% 100%;
 transform-origin: 50% 100%;
 -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
 transition: opacity 0.3s, transform 0.3s;
}

.tooltip-effect .tooltip-content i {
 -webkit-transform: translate3d(0,20px,0);
 transform: translate3d(0,20px,0);
 -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
 transition: opacity 0.3s, transform 0.3s;
}

.nav-dot:hover .tooltip-content,
.nav-dot:hover .tooltip-content i {
 pointer-events: auto;
 -webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
 transform: translate3d(0,0,0) scale3d(1,1,1);
}

.nav-dot.whiteText { /* for the change of .nav-dot colour */
 border-color: #1d4166;
}