See the example on frontier project >>> http://staging.greenboxdesigns.com/frontier or >> http://webtricker.com/projects/frontier/

single-page-nav-scroll-function.js

//Navigation function
        var sections = $('.section-parent'),
            nav = $('nav.main-nav');
            //nav_height = $('.main-header-section').outerHeight();

        $(window).on('scroll', function (){
            var cur_pos = $(this).scrollTop();

            sections.each(function () {
                var top = $(this).offset().top - 5,
                    bottom = top + $(this).outerHeight();

                if (cur_pos >= top && cur_pos <= bottom) {                    
                    nav.find('a').parent().removeClass('active');
                    sections.removeClass('active');

                    $(this).addClass('active');
                    nav.find('a[href="' + $(this).attr('id') + '"]').parent().addClass('active');
                    
                    sectionBg = $(this).find(".section-bg").attr('src');
                    $("#hero-wrap").css({
                        "background-image" : "url(" + sectionBg + ")"
                    })
                    
                }
            });
        });
        
        $(".main-nav ul li a").each(function(){
            var id = $(this).attr('href');
            $(this).addClass(id+'-link');
        })
        
        nav.find('a').on('click', function () {
            var $el = $(this),
                id = $el.attr('href');
            $(".main-nav ul li").removeClass('active');
            $el.parent().addClass('active');

            $('html, body').animate({
                scrollTop: $('#'+id).offset().top - 0
            }, 1000, 'easeInOutCubic');

            return false;
        });