jQuery Fullpage - Показать текущую позицию раздела с горизонтальной строкой в ​​меню

Question

Я пытаюсь показать строку как индикатор активного раздела на странице fullpage.js.

Эта страница имеет несколько разделов &, а подразделение должно показывать горизонтальную красную линию до активной навигации.

например, если я на первом месте, тогда строка должна быть ширины первой секции, и если я на участке секции, ширина линии должна быть до конца раздела и так далее.

Ссылка для codepen

<div id="fullpage"> 
    <div class="section" data-anchor="one">Section One</div> 
    <div class="section" data-anchor="two">Section Two</div> 
    <div class="section">Section Two sub page one</div> 
    <div class="section">Section Two sub page two</div> 
    <div class="section" data-anchor="three">Section Three</div> 
    <div class="section" data-anchor="four">Section Four</div> 
</div> 

<div class="nav-wrapper"> 
    <hr> 
    <ul id="myMenu"> 
    <li data-menuanchor="firstPage" class="active"><a href="#one">First section</a></li> 
    <li data-menuanchor="secondPage"><a href="#two">Second section</a></li> 
    <li data-menuanchor="thirdPage"><a href="#three">Third section</a></li> 
    <li data-menuanchor="fourthPage"><a href="#four">Fourth section</a></li> 
    </ul> 
</div> 



.section { 
    text-align:center; 
    font-size: 3em; 
} 
.content{ 
    margin:50px 
} 
#myMenu{position:absolute; background-color:#eee; top:0; width:100%; margin:0px !important; padding:0px !important;} 

.active{font-size:15px; background-color:purple; } 
.nav-wrapper{position:absolute; height:20px; bottom:0;width:100%; z-index:999999999; background:blue;} 
.nav-wrapper > ul li {list-style:none; display:inline-block; padding:0px !important; margin:0px ; margin-left:-4px; text-align:center;} 
.nav-wrapper ul li{width:calc(100%/4);} 
hr { 
    background: #f00 none repeat scroll 0 0; 
    height: 5px; 
    position: relative; 
    width: 100%; 
    z-index: 999999999; 
    margin:-5px 
} 

, как я могу это сделать с помощью JQuery

Answer 1

Поскольку некоторые из ваших страниц подстраниц, не существует в меню вам придется извлечь страницы и сохраните их в другой переменной:

var visibleMenuSections = $('#myMenu a').map(function() { 
    return $(this).attr('href').substr(1); 
}).get() 

Теперь эта переменная содержит массив ссылок :

["one", "two", "three", "four"] 

После того как вы этот массив, который вы можете использовать функцию обратного вызова afterLoad в fullpage, чтобы установить с из hr после каждого изменения страницы:

afterLoad: function(anchorLink, index) { 
    p = visibleMenuSections.indexOf(anchorLink); 
    if (p > -1) { 
     $('.nav-wrapper hr').width((p+1) * (100/visibleMenuSections.length) + '%'); 
    } 
} 

Вот рабочая jsfiddle:
http://codepen.io/anon/pen/PGOYmA

Примечание. У вас возникла проблема в вашем html - значениях data-menuanchor в меню должны быть точные значения раздела data-anchor.

Вот обновленная версия jsfiddle (с небольшим количеством изменений Css):
http://codepen.io/anon/pen/WGXZaG