在节滚动上将活动类添加到菜单项

时间:2016-03-16 19:36:26

标签: jquery html

我有以下代码。它的工作原理但唯一的问题是当它滚动到该部分时,它没有向菜单项添加活动类。 请帮忙

<nav class="nav-1">
    <ul class="menu nav_menu_css_class">
        <li class="menu-item"><a href="#section1-1" class="menu_item active-right"></a></li>
        <li class="menu-item"><a href="#section1-2" class="menu_item"></a></li>
        <li class="menu-item"><a href="#section1-3" class="menu_item"></a></li>
    </ul>
</nav>   
<div class="center_pages_wrap" id="center_pages_wrap">
    <section id="section1-1" class="current-section" name="section1-1"></section>
    <section id="section1-2" name="section1-2"></section>
    <section id="section1-3" name="section1-3"></section>
</div>    
<script>
    var sections = jQuery('.sections1');
    var nav = jQuery('.right_menu_wrap nav.nav-1');
    var nav_height = nav.outerHeight()+130;         
    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('active-right');
          sections.removeClass('current-section');
          jQuery(this).addClass('current-section');
          nav.find('a[href="#'+jQuery(this).attr('id')+'"]').addClass('active-right');
        }
      });
    });
</script>

0 个答案:

没有答案