<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="#story1"></a></li> <li class="awesome-tooltip" title="About"><a href="#story-2"></a></li> <li class="awesome-tooltip" title="Projects"><a href="#story-3"></a></li> <li class="awesome-tooltip" title="Contact"><a href="#story4"></a></li> </ul> </div> <div id="main-story" class="container-story"> <section id="story-1"> <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="story-2"> <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="story-3"> <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="story-4"> <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>

body-story { background: #f0f0f0; } body-story, html { height: 100%; } #main-story { height: 100%; } section-story { padding: 13% 0; height: 100%; } #dot-nav-story{ right: 10px; top: 50%; margin-top: -50px; height: 100px; z-index: 999; } #dot-nav-story ul { list-style: none; margin:0; padding: 0; } #dot-nav-story li { position: relative; background-color: #9241e2; border:3px solid #7100e2; border-radius: 15px 15px 15px 15px; cursor: pointer; padding: 5px; height: 10px; margin: 10px 10px 0px 0px; width: 10px; vertical-align:bottom; } #dot-nav-story li.active, #dot-nav li:hover { background-color: #7100e2; } #dot-nav-story a { outline: 0; vertical-align:top; margin: 0px 0px 0px 25px; position: relative; top:-5px; } .awesome-tooltip + .tooltip > .tooltip-inner { background-color: #7100e2; color: #52007f; border: 1px solid #7100e2; } .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 #52007f; }

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