将活动状态添加到滚动的菜单项

我已经看到有关此问题的几个主题。我添加了他们，改为我的网站特定类，但我没有看到它的工作。因此，希望你可以为我创建一个自定义函数。将活动状态添加到滚动的菜单项

我有this website，我正在寻找一种方法，根据网站上的滚动位置，让每个菜单项具有活动状态('.active')。

总结我的网站版本

<nav id="topMenu"> 
    <ul class="right-side"> 
    <a href="#sectionA">Section A</a> 
    <a href="#sectionB">Section B</a> 
    <a href="#sectionC">SectionC</a> 
    </ul> 
</nav> 

<section id="sectionA"> 
    content... 
</section> 

<section id="sectionA"> 
    content... 
</section> 

<section id="sectionA"> 
    content... 
</section>

我不能确定你是否需要我的HTML页面布局的详细信息，虽然可以简单的打开网页，并检查源。

希望有人能帮忙！

来源

2014-05-16 Sander Schaeffer

你应该显示一些jQuery代码。 – TreeTree

为什么/什么样的jQuery代码？ - 我添加了jQuery标签，因为这只能用jQuery（/或javascript）完成 - 如果这就是你的意思。 –

你有没有试图自己做这个？ – TreeTree

这应该解决。我再也不记得它为什么起作用了。我推荐研究下面的代码并自己尝试一下。

$(window).scroll(function() { 
    var currentPosition = $(this).scrollTop() + 55; 
    links.removeClass('active'); 
    lis.removeClass('active'); 

    sections.each(function() { 
     var top = $(this).offset().top, 
      bottom = top + $(this).height() + 100; 

     if (currentPosition >= top && currentPosition <= bottom) { 
      var link = $('a[href="#' + this.id + '"]'); 
      link.addClass('active'); 
      link.parent().addClass('active'); 
     } 
    }); 
}); 
});

来源

2014-08-06 06:51:41

将活动状态添加到滚动的菜单项

回答

相关问题