Color doesn't change at active dot in vertical dot navigation
<p>I implemented vertical dot navigation.
(1)The problem is the active dot's color is not changed to white. Just the first one is kept with white color though it is not active as shown in figure <a href="https://i.stack.imgur.com/RXhEP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RXhEP.png" alt="(fig)"></a>.
(2)How can I bring down the dot positions? I tried at position, right and top properties, but not changed.</p>

<pre><code>.vNav {
    position:absolute;
    right:7px;
    top:200px;
    width: 50px;
    z-index: 9999;
    list-style-type: none;
}
</code></pre>

<p>My <code>HTML</code> is</p>

<pre><code>&lt;form  class="summarybackground" name="summary"  id="summary" style="height:500px;width:920px;overflow-y:hidden;"  method="post"&gt;

&lt;div class="myBox" id="section"&gt; 

    &lt;div class="vNav"&gt;
      &lt;ul class="vNav"&gt;
          &lt;li&gt; &lt;a href="#section1"&gt;&lt;div class="label"&gt;Landed&lt;/div&gt;&lt;/a&gt;

          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#section2"&gt;&lt;div class="label"&gt;Apartment&lt;/div&gt;&lt;/a&gt;

          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#section3"&gt;&lt;div class="label"&gt; Condominium &lt;/div&gt;&lt;/a&gt;

          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#section4"&gt;&lt;div class="label"&gt; Commercial &lt;/div&gt;&lt;/a&gt;

          &lt;/li&gt;
          &lt;li&gt; &lt;a href="#section5"&gt;&lt;div class="label"&gt; Farm &lt;/div&gt;&lt;/a&gt;

          &lt;/li&gt;
      &lt;/ul&gt;


   &lt;/div&gt;

   &lt;div class="col-sm-9"&gt;
      &lt;div id="section1" class="par"&gt;    
        &lt;h1&gt;Landed&lt;/h1&gt;

      &lt;/div&gt;
      &lt;div id="section2" class="par"&gt; 
        &lt;h1&gt;Apartment&lt;/h1&gt;

      &lt;/div&gt;
      &lt;div id="section3" class="par"&gt;         
        &lt;h1&gt;Condominium&lt;/h1&gt;

      &lt;/div&gt;

      &lt;div id="section4" class="par"&gt;         
        &lt;h1&gt;Commercial&lt;/h1&gt;

      &lt;/div&gt; 

      &lt;div id="section5" class="par"&gt;        
        &lt;h1&gt;Farm&lt;/h1&gt;

      &lt;/div&gt;
   &lt;/div&gt;   



&lt;/div&gt;

&lt;/form&gt;
</code></pre>

<p>Javascript is</p>

<pre><code>&lt;script&gt;
$(document).ready(function ($) {
    var parPosition = [];
    $('.par').each(function () {
        parPosition.push($('form').offset().top);
    });

    $('a').click(function () {
        $('form').animate({
            scrollTop: $($.attr('form', 'href')).offset().top
        }, 500);
        return false;
    });

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $('form').addClass('active');
    });

    $('.vNav a').hover(function () {
        $(this).find('.label').show();
    }, function () {
        $(this).find('.label').hide();
    });

    $(document).scroll(function () {
        var position = $('form').scrollTop(),
            index;
        for (var i = 0; i &lt; parPosition.length; i++) {
            if (position &lt;= parPosition[i]) {
                index = i;
                break;
            }
        }
        $('.vNav ul li a').removeClass('active');
        $('.vNav ul li a:eq(' + index + ')').addClass('active');
    }).scroll();

    $('.vNav ul li a').click(function () {
        $('.vNav ul li a').removeClass('active');
        $(form).addClass('active');
    });
});
&lt;/script&gt;
</code></pre>

<p>CSS is</p>

<pre><code>.summarybackground {background-color:#000000;}

.myBox {
border: none;
padding: 5px;
font: 24px/36px sans-serif;
width: 850px;
height: 500px;
margin-bottom: 150%;
}


.vNav {
    position:absolute;
    right:7px;
    top:200px;
    width: 50px;
    z-index: 9999;
    list-style-type: none;
}
.vNav ul {
    position: relative;
    padding: 3px;
    padding-left: 35%;
}
.vNav ul li {
    position: relative;
    padding-bottom: 20px;
    padding-left: 35%;
    color: rgb(113, 135, 133);
}
.vNav a {
    display: block;
    width: 13px;
    height: 13px;
    text-indent: -9999px;
    border-radius: 50%;
    border: 2px solid;
    border-color: rgb(113, 135, 133);
    text-decoration: none;
}
.vNav a:hover {
    border-radius: 50%;
    background-color: rgb(113, 135, 133);
    text-decoration: none;
}
.vNav a.active {
    border-radius: 50%;
    background-color: #ffffff;
    text-decoration: none;
}

.label {
    position:absolute;
    right: 5%;
    top: 40%;
    width: 100%;
    text-align: right;
    font-size: 2em;
    color: #ffffff;
    display: none;
}


  div.col-sm-9 div {
      height: 500px;
      font-size: 28px;
  }

  #section1 {color: #fff; background-color: #1E88E5;}
  #section2 {color: #fff; background-color: #673ab7;}
  #section3 {color: #fff; background-color: #ff9800;}
  #section4 {color: #fff; background-color: #00bcd4;}
  #section5 {color: #fff; background-color: #009688;}
</code></pre>