(SOPT) 32574

Do MagicLine on anchor scroll http://pt.stackoverflow.com/a/32612/201

HTML

<script src="https://rawgit.com/imakewebthings/jquery-waypoints/master/waypoints.min.js"></script>
<div id="page">
    <nav>
        <ul>
            <li class="current_page_item"><a href="#box1">Home</a></li>
            <li><a href="#box2">O que é?</a></li>
            <li><a href="#box3">Funcionalidade</a></li>
            <li><a href="#box4">Planos e Preços</a></li>
            <li><a href="#box5">Dúvidas</a></li>
        </ul>
    </nav>
    <section class="boxes" id="box1"><a>Topo</a></section>
    <section class="boxes" id="box2"><a>O que é?</a></section>
    <section class="boxes" id="box3"><a>Funcionalidade</a></section>
    <section class="boxes" id="box4"><a>Planos e Preços</a></section>
    <section class="boxes" id="box5"><a>Dúvidas</a></section>
</div>

CSS

body {
    margin: 0;
    background-color: #eee
}
.fiddle-header {
    background-color: #ccc;
    margin:0 0 10px 0;
    text-align: center;
    color: #fff;
    font-family: sans-serif;
    position: fixed;
    top:30px;
    right:0;
    z-index:999
}
.fiddle-header a {
    text-decoration: none;
    color: #eee
}
#page {
    height:3000px;
}
.nav-wrap {
    margin: 5px auto;
    margin-bottom:50px;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
nav ul {
    background-color: #fff;
    margin: 0 auto;
    list-style: none;
    position:fixed;
    width:100%;
    z-index:1;
    padding: 10px
}
nav ul li {
    display: inline;
    float: left;
}
nav ul li a {
    color: #bbb;
    font-size: 14px;
    display: block;
    padding: 6px 10px 4px 10px;
    text-decoration: none;
}
nav ul li a:hover {
    color: #ddd;
}
#magic-line {
    position: absolute;
    bottom: 6px;
    left: 0;
    width: 100px;
    height: 2px;
    background: #fe4902;
}
.boxes {
    height:600px;
    padding: 10px;
    padding-bottom:500px;
    width:100%;
    position:relative;
    float:left;
    z-index:0;
}
#box1 {
    margin-top:50px;
    background-color: #458ACB
}
#box2 {
    background-color: #FFD26A
}
#box3 {
    background-color: #DE5E45
}
#box4 {
    background-color: #FFD8C2
}
#box5 {
    background-color: #3A1D55
}

JavaScript

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

/* Do magic */
function magicline() {
    var $el, leftPos, newWidth,
    $mainNav = $("nav ul");
    $("#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());

    $("nav ul 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")
        });
    });
}

/* Menu click navigation */
$('li a').on('click', function () {
    $('li').each(function () {
        $(this).removeClass('current_page_item');
    });
    $(this).parent().addClass('current_page_item');
    magicline();
});

/* Start page with current item from URL */
var loc = window.location.pathname.split('/')[1];
$('nav ul a[href=' + loc + ']').parent().addClass('current_page_item');

/* Do the Way of the Point */
$('.boxes')
    /* Offset ao fazer scroll up */
    .waypoint(function (direction) {
        if ('up' === direction) {
            $num_id = parseInt($(this).attr('id').replace('box', ''), 10);
            $top_id = '#box' + ($num_id - 1);
            $('a[href="' + $top_id + '"]').trigger('mouseover');
        } 
    }, { 
        offset: '65%' // other options
    })
    /* Offset ao fazer scroll down */
    .waypoint(function (direction) {
        if ('down' === direction) {
            $id = '#' + $(this).attr('id');
            $('a[href="' + $id + '"]').trigger('mouseover');
        }
    }, {
        offset: '10%'
    });

//...