Bootstrap Sidebar Dot Navigation


<div data-spy="affix" id="dot-nav">
    	<ul>
	      <li class="awesome-tooltip active" title="Home"><a href="#home"></a></li>
	      <li class="awesome-tooltip" title="About"><a href="#about"></a></li>
	      <li class="awesome-tooltip" title="Projects"><a href="#projects"></a></li>
	      <li class="awesome-tooltip" title="Contact"><a href="#contact"></a></li>
	    </ul>
</div>
    
    <div id="main" class="container">
    	<section id="home">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>Home Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
           </article>           
    	</section>
        <section id="about">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>About Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
           </article>           
        </section>
        <section id="projects">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>Projects Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
           </article>           
        </section>
        <section id="contact">
           <article>
               <div class="row">
                   <div class="col-md-12">
                    <h1>Contact Section <small>Secondary text</small></h1>
                       <p>
                        This is a content.                                
                       </p>
                   </div>
               </div>
           </article>           
        </section>        
    </div>
	<script type="text/javascript"></script>

    body {
    background: #f0f0f0;
}
body, html {
    height: 100%;    
}
#main {
    height: 100%;
}
section {
    padding: 13% 0;
	height: 100%;
}
#dot-nav{    
	right: 10px;
	top: 50%;
	margin-top: -50px;
	height: 100px;
	z-index: 999;
}

#dot-nav ul {
	list-style: none;
	margin:0;
	padding: 0;
}
#dot-nav li {
	position: relative;
	background-color: #bdc3c7;
	border:3px solid #bdc3c7;
	border-radius: 15px 15px 15px 15px;
	cursor: pointer;
	padding: 5px;
	height: 10px;
	margin: 10px 10px 0px 0px;
	width: 10px;
	vertical-align:bottom;
}
#dot-nav li.active, #dot-nav li:hover {
	background-color: #8e44ad;
}

#dot-nav a {
	outline: 0;
	vertical-align:top;
	margin: 0px 0px 0px 25px;
	position: relative;
	top:-5px;
}
.awesome-tooltip + .tooltip > .tooltip-inner {
    background-color: #8e44ad; 
    color: #f5f5f5; 
    border: 1px solid #8e44ad; 
}
.awesome-tooltip + .tooltip.left > .tooltip-arrow{
    top:50%;
    right:0;
    margin-top:-5px;
    border-top:5px solid transparent;
    border-bottom:5px solid transparent;
    border-left:5px solid #8e44ad;
}
    

	$(document).ready(function(){
    $('.awesome-tooltip').tooltip({
        placement: 'left'
    });   

    $(window).bind('scroll',function(e){
      dotnavigation();
    });
    
    function dotnavigation(){
             
        var numSections = $('section').length;
        
        $('#dot-nav li a').removeClass('active').parent('li').removeClass('active');     
        $('section').each(function(i,item){
          var ele = $(item), nextTop;
          
          console.log(ele.next().html());
          
          if (typeof ele.next().offset() != "undefined") {
            nextTop = ele.next().offset().top;
          }
          else {
            nextTop = $(document).height();
          }
          
          if (ele.offset() !== null) {
            thisTop = ele.offset().top - ((nextTop - ele.offset().top) / numSections);
          }
          else {
            thisTop = 0;
          }
          
          var docTop = $(document).scrollTop();
          
          if(docTop >= thisTop && (docTop < nextTop)){
            $('#dot-nav li').eq(i).addClass('active');
          }
        });   
    }

    /* get clicks working */
    $('#dot-nav li').click(function(){
      
        var id = $(this).find('a').attr("href"),
          posi,
          ele,
          padding = 0;
      
        ele = $(id);
        posi = ($(ele).offset()||0).top - padding;
      
        $('html, body').animate({scrollTop:posi}, 'slow');
      
        return false;
    });

/* end dot nav */
});