Question

我在jQuery方面很新，所以我需要有更多经验的人来帮助我。我有一个包含3项的导航 - 工作联系

默认情况下，我选择了工作，但我希望它能够更改要点击的活动类。我有锚滚动工作，但我想在点击时突出显示正确的导航项。此外，如果可以向下滚动页面并进入下一部分，则可以自动更改突出显示。

这是我用于锚点滚动的jQuery。

    <script>$(function() {
    var main-nav = $("#main-nav"), pos = main-nav.offset();
    $(window).scroll(function() { 
        if($(this).scrollTop() > (pos.top + 10) && $(this).scrollTop() < 15000 && main-nav.css('position') == 'static') { main-nav.addClass('fixed');  } 
        else if($(this).scrollTop() <= pos.top && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
        else if($(this).scrollTop() > 15000 && main-nav.hasClass('fixed')){ main-nav.removeClass('fixed'); }
        })
    });
    </script>
    <script>$(function() {
            $('ul.nav a').bind('click',function(event){
                var $anchor = $(this);

                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1500,'easeInOutExpo');
                /*
                if you don't want to use the easing effects:
                $('html, body').stop().animate({
                    scrollTop: $($anchor.attr('href')).offset().top
                }, 1000);
                */
                event.preventDefault();
            });
        });
    </script>

这是CSS

    #main-nav{
      font: bold 12px 'Bitter', serif;
      width: 145px;
      float: right;
    }
    #main-nav li{
      float: left;
      list-style: none;
      margin: 10px 2px 0 2px;
      color: #c4c5c5;
    }
    #main-nav li:last-child{
      margin-right: 0;
    }
    #main-nav a{
      text-decoration: none;
      color: #c4c5c5;
    }
    #main-nav a:hover{
      text-decoration: none;
      color: #919292;
    }
    #main-nav a.active{
      color: #919292;
    }

这是HTML

    <div id="main-nav" class="">
                <ul class="nav">
                    <li><a class="active" href="#work">Work</a></li>
                    <li>/</li>
                    <li><a href="#anchor-about">About</a></li>
                    <li>/</li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </div>

如果有人可以帮助我，我真的很感激！

Answer 1

由于您使用active类来指定应突出显示哪个锚点，因此您只需确保正确的锚点具有该类。修复了在$('ul.nav a').bind添加：

中点击导航项时很简单的问题

  $('ul.nav a').removeClass('active');
  $(this).addClass('active');

Here is a jsbin

要在页面滚动时突出显示导航，您只需将页面的scrollTop与DOM中元素的偏移进行比较...类似于$(window).scroll中的当前代码。

使用锚点滚动时突出显示导航项目

1 个答案: