。主動鏈接

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（）函數。