anchor - アンカー スクロールの使用時にナビゲーション アイテムを強調表示する

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>

誰かが私を助けてくれたら、本当に感謝しています！