Javascript 滚动页面上的活动菜单项

我在“一页”网站上使用了这种菜单：

使用这段代码，我成功地在页面滚动上设置了活动菜单项。当我向下滚动到下一个锚点时，我看到我的菜单项将其状态更改为“活动”。这是我成功使用的代码：

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');
    }
  });
});

var sections=jQuery（'section'））
，nav=jQuery（'nav'）
，nav_height=nav.outerHeight（）；
jQuery（窗口）.on（'scroll'，函数（）{
var cur_pos=jQuery（this）.scrollTop（）；
节。每个（函数（）{
var top=jQuery（this）.offset（）.top-nav_height，
bottom=top+jQuery（this.outerHeight（）；
如果（当前位置>=顶部和当前位置
$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'a'）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}
})
body，html{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
保险商实验室{
位置：固定；
}
ulli{
列表样式：无；
利润率：0.30px 0.0；
显示：内联；
}
.主动{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：#fff；
文字装饰：无；
线高：50px；
}
a{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：黑色；
文字装饰：无；
线高：50px；
}
#家{
背景颜色：灰色；
身高：100%；
宽度：100%；
溢出：隐藏；
}
#服务{
背景色：#878775；
身高：100%；
宽度：100%；
}
#关于{
背景颜色：蓝色；
身高：100%；
宽度：100%；
}
#工作{
背景色：红色；
身高：100%；
宽度：100%；
}








$（文档）.ready（函数（）{
$（文档）.on（“滚动”，onScroll）；
函数onScroll（事件）{
var scrollPos=$（document.scrollTop（）；
$（'a'）。每个（函数（）{
var currLink=$（此）；
var refElement=$（currLink.attr（“href”）；
if（refElement.position（）.top scrollPos）{
$（'a'）.removeClass（“活动”）；
currLink.addClass（“活动”）；
}
否则{
currLink.removeClass（“活动”）；
}
});
}
})
body，html{
保证金：0；
填充：0；
身高：100%；
宽度：100%；
}
保险商实验室{
位置：固定；
}
ulli{
列表样式：无；
利润率：0.30px 0.0；
显示：内联；
}
.主动{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：#fff；
文字装饰：无；
线高：50px；
}
a{
字体系列：'Droid Sans'，衬线；
字体大小：14px；
颜色：黑色；
文字装饰：无；
线高：50px；
}
#家{
背景颜色：灰色；
身高：100%；
宽度：100%；
溢出：隐藏；
}
#服务{
背景色：#878775；
身高：100%；
宽度：100%；
}
#关于{
背景颜色：蓝色；
身高：100%；
宽度：100%；
}
#工作{
背景色：红色；
身高：100%；
宽度：100%；
}







我可以用你的内容html代码来测试它吗？或者你可以创建一个JSFIDLE吗？我使用这个框架脚本的问题是，我想把类“curent”放在“a”标记上而不是“li”标记上标签。我可以用你的内容html代码来测试它吗？或者你可以创建一个JSFIDLE吗？我使用这个框架，脚本的问题是我想把类“curent”放在“a”标签上而不是“li”标签上。正如你在我的新菜单结构上看到的，class=“current active”转到
标记。我尝试了你的脚本，但它不起作用。我会检查并让你知道Hello@anu-我真的很抱歉打扰你，但是你可以快速看一下我最近关于这个主题的问题。你可能可以很容易地修复它（），正如你在我的新菜单结构上看到的class=“current active”转到
标记。我尝试了你的脚本，但它不起作用。我会检查并让你知道Hello@anu-我真的很抱歉打扰你，但是你能快速查看一下我最近关于这个主题的问题吗。你可能可以很容易地解决它（）
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>