jQuery 全页 - 在菜单上用水平线显示当前部分位置

Question

我试图在基于 fullpage.js 的页面中显示线条作为活动部分的指示器。

此页面有多个部分和子部分，活动部分应显示为一条水平红线直至活动导航。

例如，如果我在第一个部分，那么线的宽度应该是第一个部分的宽度，如果我在第一个部分，则线宽应该是第一个部分的末尾等等。

Link 对于 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"]

获得此数组后，您可以使用 fullpage 的回调 afterLoad 在每次页面更改后设置 hr 的 with：

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

Note - you had a problem in your html - the values of the data-menuanchor in the menu should be the exact values of the data-anchor of the section.

这是 jsfiddle 的更新版本（有一些 css 更改）：
http://codepen.io/anon/pen/WGXZaG

jQuery 全页 - 在菜单上用水平线显示当前部分位置

jQuery Fullpage - Show current section position with horizontal line on menu

javascript

css

jquery

fullpage.js