滚动页面上的导航栏.活动链接

目前我的网站有一个固定导航栏的滚动功能（当你点击导航栏上的不同链接时，页面会向下滚动。我添加了一个功能，即你所在的页面有一个活动链接。唯一的问题是，当你点击浏览栏上的另一个链接时，当它经过其他页面时，这些链接会高亮显示，直到你到达你想要的页面（例如，如果你正在联系并点击主页，它会突出显示投资组合，然后是体验，然后是关于，最后是主页。我不希望它突出显示它经过的那些。

http://jsfiddle.net/gigi2233/e0jbvmyk/6/

HTML

<!--nav-->
<div id="icon">
    <ul class="icon">
        <li><img src="logo.jpg" alt="logo" class="icon"></li>
    </ul>
</div>
<div id="nav">
    <ul class="nav">
        <li><a href="#home" onClick="gaq.push(('_trackPageview', 'home'))" class="link">HOME</a></li>
        <li><a href="#about" onClick="gaq.push(('_trackPageview', 'about'))" class="link">ABOUT</a></li>
        <li><a href="#experience" onClick="gaq.push(('_trackPageview', 'experience'))" class="link">EXPERIENCE</a></li>
        <li><a href="#portfolio" onClick="gaq.push(('_trackPageview', 'portfolio'))" class="link">PORTFOLIO</a></li>
        <li><a href="#contact" onClick="gaq.push(('_trackPageview', 'contact'))" class="link">CONTACT</a></li>
    </ul>
</div>

<!--home-->
<div id="home">
    <img src="home-large.jpg" class="homeposition">
</div>

<!--about-->

<div id="about">
    <img src="home-large.jpg" class="aboutposition">
</div>

<!--experience-->

<div id="experience">
    <img src="experience-large.jpg" class="experienceposition">
    <br><br>
    <a href="genevieveshahresume.pdf" class="resume"> DOWNLOAD PDF </a>

</div>
<!--portfolio-->
<br>

<div id="portfolio">
    <img src="home-large.jpg" class="portfolioposition">
</div>


<!--contact-->
<div id="contact">
        <img src="home-large.jpg" class="contactposition">
</div>
</body>
</html>

jQuery

https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
js/jquery-1.10.2.min.js

CSS

body{
    font-size: 12pt;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    margin-left: auto;
    margin: 0px;
    padding: 0px;
    }
.wrapper{
    width: 400px;
    margin: 0 auto;
    position: relative;
    padding: 28px 0 0 0;
    }
.down{
    text-align:center;
    position:relative;
    }
/* nav */
 #nav ul{ 
    margin-top: 0px;
    width: 100%;
    padding: 25px 0px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    margin-left: auto;
    text-align: center;
    z-index: 4;
    } 
 #nav ul li{  
    display: inline-block; 
    } 
#nav ul li a{ 
    text-decoration: none; 
    padding: 25px 35px; 
    color: #000000; 
    background-color: #f2f2f2; 
    } 
#nav ul li a:hover{ 
    color: #8dacf9; 
    background-color: #ffffff;
    }
#nav ul li a.active{ 
    color: #8dacf9; 
    background-color: #ffffff; 
    }

/* icon */
.icon{
    float: left;
    height: 50px;
    margin-top: 0px;
    position: fixed;
    z-index: 10;
    }
#icon ul{ 
    margin-top: auto;
    padding: 10px 30px;
    background-color: #f2f2f2; 
    border-top:solid #8dacf9;
    position: fixed;
    } 
#icon ul li{  
    display: inline; 
    } 
#icon ul li a{ 
    color: #000000; 
    background-color: #f2f2f2; 
    margin-top: 0px;
    } 

/*  links */
a:link{
    color: #000000;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }
a:visited{
    text-decoration: none;
    color: #000000;
    }
a:hover{
    text-decoration: none;
    color: #8dacf9;
    }
a:active{
    text-decoration: none;
    color: #8dacf9;
    }   

/*home*/
#home{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
    width: auto;
    }
.homeposition{
    text-align:center;
    margin-top:70px;
    }

/* about */
#about{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }
.aboutposition{
    text-align:center;
    margin-top:70px;
    }

/* experience */
#experience{
    height:auto;
    position:relative;
    color: #000000;
    text-align: center;
    }
.experienceposition{
    margin-top:70px;
    }
.resume:link{
    color: #8dacf9;
    font-size: 1.2em;
    text-decoration: none;
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    }
.resume:visited{
    text-decoration: none;
    color: #8dacf9;
    }
.resume:hover{
    text-decoration: none;
    color: #b4b3b3;
    }
.resume:active{
    text-decoration: none;
    color: #b4b3b3;
    }   

/* portfolio */
#portfolio{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }
.portfolioposition{
    text-align:center;
    margin-top:70px;
    }

/* contact */
#contact{
    height:auto;
    position:relative;
    color: #000000;
    font-size:1em;
    text-align: center;
    }
.contactposition{
    text-align:center;
    margin-top:70px;
    }

JAVASCRIPT

$(document).ready(function () {
    $(window).scroll(function () {
        var y = $(this).scrollTop();
        $('.link').each(function (event) {
            if (y >= $($(this).attr('href')).offset().top - 10) {
                $('.link').not(this).removeClass('active');
                $(this).addClass('active');
            }
        });
    });
});

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^'//,'') == this.pathname.replace(/^'//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: (target.offset().top - 0)
        }, 900);
        return false;
      }
    }
  });
});