Vertical Dot Navigation

Scrolling indicator and vertical navigation.

by gasp10

HTML

<form  class="summarybackground" name="summary"  id="summary" style="height:550px;width:920px;overflow-y:auto;"  method="post">

<div class="myBox" id="section"> 
    <div class="vNav">
      <ul class="vNav">
          <li> <a href="#section1"><div class="label">Landed</div></a>

          </li>
          <li> <a href="#section2"><div class="label">Apartment</div></a>

          </li>
          <li> <a href="#section3"><div class="label"> Condominium </div></a>

          </li>
          <li> <a href="#section4"><div class="label"> Commercial </div></a>

          </li>
          <li> <a href="#section5"><div class="label"> Farm </div></a>

          </li>
      </ul>

   </div>

   <div class="col-sm-9">
      <div id="section1">    
        <h1>Landed</h1>
      </div>
      <div id="section2"> 
        <h1>Apartment</h1>
      </div>
      <div id="section3">         
        <h1>Condominium</h1>
      </div>
      <div id="section4">         
        <h1>Commercial</h1>
      </div> 
      <div id="section5">         
        <h1>Farm</h1>
      </div>
   </div>


</form>

CSS

.vNav {
    position:absolute;
    right:5%;
    top:40%;
    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: rgb(207, 219, 218);
    text-decoration: none;
}

.label {
    position:absolute;
    right: 5%;
    top: 40%;
    width: 100%;
    text-align: right;
    font-size: 1em;
    color: rgb(113, 135, 133);
    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;}

JavaScript

var parPosition = [];
    $('.par').each(function () {
        parPosition.push($(this).offset().top);
    });

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

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

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

    $(document).scroll(function () {
        var position = $(document).scrollTop(),
            index;
        for (var i = 0; i < parPosition.length; i++) {
            if (position <= 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');
        $(this).addClass('active');
    });