Jquery Vertical Navigation

Simple vertical navigation with dots and full screen scroll with bootstrap

by rupesx

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.5/custom/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<nav id="verticalNav">
    <ul class="verticalNav">
        
    </ul>
    
</nav>
<div class="box" id="box1" data-name="one">one</div>
<div class="box" id="box2" data-name="two">two</div>
<div class="box" id="box3" data-name="three">three</div>
<div class="box" id="box4" data-name="four">four</div>
<div class="box" id="box5" data-name="five">five</div>
<div class="box" id="box6" data-name="six">six</div>
<div class="box" id="box7" data-name="seven">seven</div>
<div class="box" id="box8" data-name="eight">eight</div>
<div class="box" id="box9" data-name="nine">nine</div>

CSS

body, html{
    height:100%;
}

.box{
    min-height:100%;
    width:200px;
    border:1px solid red;
    margin:10px;
        
}
nav{
    position:fixed;
    right:50px;
    top:50px;
    border:1px solid green;
    width:50px;
    
}
ul{
    padding:0;
    margin:0;
}
li{
    list-style:none;
    margin:10px 5px;
    text-align:center;
}
nav li a{
   width:10px;
    height:10px;
    background-color:#333;
    display:block;
    position:relative;
}

nav li a span{
    position:absolute;
    right:20px;
    top:0;
    display:none;
}
nav li a.active{
    background-color:red;
}

nav li a:hover span{
    display:block;
}

JavaScript

$(document).on("scroll", onScroll);

var arrayVariable = [ ];
var sectionName = [ ];
$(".box").each(function (i) 
{
    arrayVariable[i]=$(this).attr("id")
    sectionName[i]=$(this).attr("data-name")
    console.log()
});

console.log(arrayVariable)
for (var i=0; i < arrayVariable.length; i++){
   $("#verticalNav ul").append('<li>' + '<a href=' + '#' + arrayVariable[i] + '>' + '<span>'+ sectionName[i] + '</span>'   + '</li>')
}

$('#verticalNav li:first-child a').addClass('active');

$('#verticalNav li a').bind('click',function(event){
		var $anchor = $(this);
		$('html, body').stop().animate({							   
		scrollTop: $($anchor.attr('href')).offset().top - 0
		}, 1500,'easeInOutExpo');
		event.preventDefault();
    
});

function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('#verticalNav a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('#verticalNav ul li a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
    });
}