How to use MagicLine in single page site navigation?

Magic Line is a jQuery plugin that has the function of adding a line below li from the navigation menu to represent which page the user is in. If the URL matches a menu element, an .active class will be added to li , and the line will be below it. The difference of this plugin is that by giving :hover to another menu element, the line goes animatedly to the :hover element, returning as soon as the cursor is taken from above.

This plugin works well on multi-page sites, where each page has a unique URL, but single page sites , are divided into several sections. Each of these sections changes is linked to the menu, so you can do automatic scrolling. I need to implement a scheme similar to that of MagicLine on a single page, where according to the scrolling, #url is changed and the position of the line under the menu as well.

Final code:

HTML

<div id="page">
    <div class="nav-wrap">
        <ul class="group" id="example-one">
            <li class="current_page_item"><a href="#box1">Box1</a>
            </li>
            <li><a href="#box2">Box2</a>
            </li>
            <li><a href="#box3">Box3</a>
            </li>
            <li><a href="#box4">Box4</a>
            </li>
        </ul>
    </div>
    <div class="boxes" id="box1">
        <a>Box1</a> 
    </div>
    <div class="boxes" id="box2">
        <a>Box2</a> 
    </div>
    <div class="boxes" id="box3">
        <a>Box3</a> 
    </div>
    <div class="boxes" id="box4">
        <a>Box4</a> 
   </div>
</div>

CSS

#page {
    width:960px;
    height:3000px;
}
.nav-wrap {
    margin: 5px auto;
    background-color:black;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
#example-one {
    margin: 0 auto;
    list-style: none;
    position:fixed;
    width: 960px;
    z-index:1;
}
#example-one li {
    display: inline;
    float: left;
}
#example-one li a {
    color: #bbb;
    font-size: 14px;
    display: block;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
}
#example-one li a:hover {
    color: white;
}
#magic-line {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #fe4902;
}
.boxes {
    height:300;
    padding-bottom:500px;
    width:100%;
    position:relative;
    float:left;
    z-index:0;
}

jQuery

$(document).ready(function () {
    magicline();
});

function magicline() {
    var $el, leftPos, newWidth,
    $mainNav = $("#example-one");
    $("#magic-line").remove();
    $mainNav.append("<li id='magic-line'></li>");
    var $magicLine = $("#magic-line");

    $magicLine.width($(".current_page_item").width())
    .css("left", $(".current_page_item a").position().left)
    .data("origLeft", $magicLine.position().left)
    .data("origWidth", $magicLine.width());

    $("#example-one li a").hover(function () {
        $el = $(this);
        leftPos = $el.position().left;
        newWidth = $el.parent().width();
        $magicLine.stop().animate({
            left: leftPos,
            width: newWidth
        });
    }, function () {
        $magicLine.stop().animate({
            left: $magicLine.data("origLeft"),
            width: $magicLine.data("origWidth")
        });
    });
}

$('li a').on('click', function () {
    $('li').each(function () {
        $(this).removeClass('current_page_item');

    });
    $(this).parent().addClass('current_page_item');
    magicline();
});

var loc = window.location.pathname.split('/')[1];
$('.group a[href='+ loc +']').parent().addClass('current_page_item')

JSFiddle