I'm trying to change the colour of my dot navigation on a single page site as they move from one section to another using the section id in js

Question

I have found close examples like this stack but they all use exact px to determine the change points. My site is responsive and thus the required change points will not be fixed.

For that reason I thought my best option would be to use the section id tags to determine the change points.

My navigations 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 -->

And the css:

#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;
}