javascript - 页面滚动上的事件菜单项

Question

我在我的“一页”网站上使用了这种类型的菜单:

<ul class="nav navbar-nav">
<li class="item-101 hovernav">  <a href="/site/">Home</a></li>
<li class="item-102 hovernav">  <a class="scroll" href="#about">About</a></li>
<li class="item-103 hovernav">  <a class="scroll" href="#services">Services</a></li>
<li class="item-104 hovernav">  <a class="scroll" href="#our-work">Work</a></li>
</ul>

使用此代码，我成功地在页面滚动上拥有事件菜单项。当我向下滚动到下一个 anchor 时，我看到我的菜单项将其状态更改为事件状态。这是我成功使用的代码:

var sections = jQuery('section')
  , nav = jQuery('nav')
  , nav_height = nav.outerHeight();

jQuery(window).on('scroll', function () {
  var cur_pos = jQuery(this).scrollTop();

  sections.each(function() {
    var top = jQuery(this).offset().top - nav_height,
        bottom = top + jQuery(this).outerHeight();

    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('current');
      sections.removeClass('current');

      jQuery(this).addClass('current');
      nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('current');
    }
  });
});

但我最近将菜单类型更改为这个:

<ul class="nav navbar-nav level0">
<li itemprop="name" class="current active home-menu-btn" data-id="103" data-level="1" data-class="home-menu-btn">
<a itemprop="url" class="" href="/site/index.php/el/" data-target="#">Home</a>
</li>
<li itemprop="name" class="scroll" data-id="104" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#about" data-target="#">About</a>
</li>
<li itemprop="name" class="scroll" data-id="105" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#skills" data-target="#">Skills</a>
</li>
<li itemprop="name" class="scroll" data-id="106" data-level="1" data-class="scroll">
<a itemprop="url" class="" href="#experience" data-target="#">Experience</a>
</li>
</ul>

现在我使用的脚本不起作用。我想现在代码必须在“a”标签上搜索菜单“id”，但将类添加到菜单项的“li”标签中。这就是区别。但我怎样才能做到这一点呢？

Answer 1

$(document).ready(function() {
    $(document).on("scroll", onScroll);

  function onScroll(event){
    var scrollPos = $(document).scrollTop();
    $('a').each(function () {
        var currLink = $(this);
        var refElement = $(currLink.attr("href"));
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
            $('a').removeClass("active");
            currLink.addClass("active");
        }
        else{
            currLink.removeClass("active");
        }
        });
    }
})

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}
ul {
  position: fixed;
  
}
ul li {
    list-style: none;
    margin: 0 30px 0 0;
    display: inline;
}
.active {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    line-height: 50px;
}
a {
    font-family:'Droid Sans', serif;
    font-size: 14px;
    color: black;
    text-decoration: none;
    line-height: 50px;
}
#home {
    background-color: grey;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
#services {
    background-color: #878775;
    height: 100%;
    width: 100%;
}
#about {
    background-color: blue;
    height: 100%;
    width: 100%;
}
#work {
    background-color: red;
    height: 100%;
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav navbar-nav">
<li class="item-101 hovernav">  <a href="#home" class="active">Home</a></li>
<li class="item-102 hovernav">  <a class="scroll" href="#about">About</a></li>
<li class="item-103 hovernav">  <a class="scroll" href="#services">Services</a></li>
<li class="item-104 hovernav">  <a class="scroll" href="#work">Work</a></li>
</ul>

<div id="home"></div>
<div id="about"></div>
<div id="services"></div>
<div id="work"></div>