How to use Magicline in Single Page navigation?

Question

Magic Line is a jQuery plugin which has the function of adding a line below the li from the navigation menu to represent which page the user is in. If the URL matches a menu item, a class .active will be added to li, and the line will be below it. The differential of this plugin, is that when giving :hover in another element of the menu, the line will animate until the element of the :hover, coming back as soon as the cursor is off.

This plugin works well on multi-page websites, where each page has unique URL, however single-page websites, are divided into several sections. Each of these alters sections is linked to the menu, so you can automatically scroll. I need to implement a scheme similar to that of Magicline in a single page, where as the scrolling, the #url is changed and the line position under the menu also.

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

Answer 1

You have to calculate if the scroll is going through one of <div class="boxes" id="ID">, take that ID and trigger the state of mouseover of <a href="#ID"> correspondent.

The plugin Waypoints helps detect that the scroll is passing through certain elements. And only with this code does it solve:

$('.boxes').waypoint(function(direction) {
    $id = '#' + $(this).attr('id');
    $('a[href="'+$id+'"]').trigger('mouseover');
});

Jsfiddle.