<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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"> <section id="home"> <article class="container"> <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 class="container"> <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 class="container"> <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 class="container"> <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>

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; } #home { background: #2c3e50; color: #3498db; } #home small { color: #bdc3c7; } #about { background: #444; } #projects { background: #666; } #contact { background: #888; }

$(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 */ });