Custom Scroll-Spy & Scroll-To-Div

by yeyene

HTML

<nav>
    <ul>
        <li><a target="main">Home</a></li>
        <li><a target="story">Our Story</a></li>
        <li><a target="work">Our Work</a></li>
        <li><a target="our-news">Our News</a></li>
        <li><a target="contact">Contact Us</a></li>
    </ul>
</nav>
<div id="main" class="content">main</div>
<div id="story" class="content">story</div>
<div id="work" class="content">work</div>
<div id="our-news" class="content">our-news</div>
<div id="contact" class="content">contact</div>

CSS

li {
    float:left;
    margin-right:10px;
    list-style:none;
    text-decoration:none;
}
li a {
    cursor:pointer;
    text-decoration:none;
    z-index:11;
    padding:0 5px;
}
li a.active {
    background:red;
    color:#fff;
}
.content {
    float:left;
    width:90%;
    padding:45% 5%;
    background:#dfdfdf;
    margin-bottom:10px;
}
nav {
    position:fixed;
    width:100%;
    padding:0 0 10px 0;
    top:0;
    left:0;
    z-index:10;
    background:green;
}

JavaScript

$('nav li a').click(function () {
    var id = $(this).attr('target');
    $('html, body').stop().animate({
        scrollTop: $('#'+id).offset().top
    }, 500);
});

$(window).scroll(function() {	
    var myArray = new Array();
    $('div.content').each(function() {
        myArray.push($(this).offset().top);
    });
    for( var i=0; i<= myArray.length; i++){
        if($(this).scrollTop() >= myArray[i]){
            $('nav a').removeClass('active');
            $('nav a').eq(i).addClass('active');
        }
    }
});