javascript - 滚动页面上的导航栏。事件链接

Question

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

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;
      }
    }
  });
});

Answer 1

我觉得你可以去掉滚动功能，只在点击时高亮显示链接。

$(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) + ']');
            // Remove 'active' class from all links
            $('.link').removeClass('active');
            // Add 'active' class to the current link
            $(this).addClass('active');
            // And animation
            if (target.length) {
                $('html,body').animate({
                    scrollTop: (target.offset().top - 0)
                }, 900);
                return false;
            }
        }
    });
});

我没有测试它，但像这样的东西应该可以工作。我不认为你真的需要 window.scroll() 函数。