滚动时突出显示无序列表中的活动类

Question

我目前正在尝试使用导航菜单中的位置指示器实现平滑滚动。我希望能够在滚动时更改颜色或区分固定导航栏的活动部分（即，在约有部分时，导航栏的大约部分被突出显示）。有没有人有一些建议？我不想使用bootstrap或插件。

以下是导航栏的html：

<nav class="navbar navbar-inverse navbar-fixed-top"> 
  <div class="container">
    <ul class="top-menu">
      <li id="home"><a href="#">HOME</a></li>
      <li id="about"><a href="#about">ABOUT</a></li>
      <li id="contact"><a href="#contact">CONTACT</a></li>
    </ul>
  </div>
</nav>

SCSS：

nav{
    /* spacing */
    text-align: center;

    /*font*/
    font-size: 30px;

    /* alignment */
    vertical-align: middle;
    z-index: 9999;
    border-radius: 0;
    position: fixed;

    /* dimensions */
    height: 80px;
    width: 100%;
    top: 0;
    border-width: 5px;

ul{
  margin-top:15px;
}

ul li{
  vertical-align: middle;
  margin: 10px;
  display: inline-block;
  margin-top:4px;
  text-decoration: none;
}

ul li a, ul li a.active{
  color: white;
  vertical-align: middle;
  margin: 5px;
  font-size: 30px;
  text-decoration: none;
  -webkit-transition: .5s all ease-out;
  -moz-transition: .5s all ease-out;
  transition: .5s all ease-out;
  }
}

使用Javascript：

$(function() {
    var pgurl = window.location.href.substr( window.location.href.lastIndexOf("/") + 1);
    $(".navbar ul li a").each(function(){
       if($(this).attr("href") == pgurl || $(this).attr("href") == '' )
          $(this).addClass("active");
    })
});