用javascript檢測當前部分

Question

我正在onePage網站上工作。我在純HTML固定的菜單，下面的代碼：

<header class="header-menu"> 
    <div class="header-menu-inside"> 
     <h1>WM Flying</h1> 
     <nav class="menu menustandard"> 
      <a class="target-section1 current" href="#section1">Home</a> 
      <a class="target-section2" href="#section2">About</a> 
      <a class="target-section3" href="#section3">Portfolio</a> 
      <a class="target-section4" href="#section4">The team</a> 
      <a class="target-section5" href="#section5">Contact</a> 
     </nav> 
    </div> 
</header> 

<div class="main" id="main"> 
    <section id="section1" class="home"> 
    </section> 
    <section id="section2" class="about"> 
    </section> 
    <section id="section3" class="portfolio"> 
    </section> 
    <section id="section4" class="team"> 
    </section> 
    <section id="section5" class="contact"> 
    </section> 
</div> 

然後我想改變「電流」部分以不同的樣式應用到所選的菜單。這裏是我的javascript：

var currentSection = "section1"; 

function change($section){ 
    $('nav.menu a').removeClass('current'); 
    currentSection = $section.attr('id'); 
    $('body').removeClass(); 
    $('body').addClass($section.attr('id') + '-visible'); 
    $('.target-'+currentSection).addClass('current'); 
} 

然後我應用CSS是這樣的：

nav a.current, nav a:hover{ 
    background: #F0F0F0; 
    color: #E46C51; 
} 

調用的函數，我用這個：

$("#main section").waypoint(function(direction) { 
    if(direction === 'down') { 
     change($(this)); 
    } 
}, { offset: '20%' }).waypoint(function(direction) { 
    if(direction === 'up') { 
     change($(this)); 
    } 
}, { offset: '-20%' }); 

但似乎並不工作。有人能幫助我嗎？

非常感謝你，

薩科

Answer 1

$(function() { 
    // Select all links with hashes 
    $('a[href*="#"]') 
     // Remove links that don't actually link to anything 
     .not('[href="#"]') 
     .not('[href="#0"]') 
     .click(function (event) { 
      // On-page links 
      if (
      location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') 
      && 
      location.hostname == this.hostname 
     ) { 
       // Figure out element 
       var target = $(this.hash); 
       target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); 
       // Does a target exist? 
       if (target.length) { 
        //remove all class 'current-session before add new class' 
        $(".menustandard").children().removeClass("current-session"); 
        var id_target = target.attr('id'); 
        var current_section_menu = $(".menustandard " + "a[href='#" + id_target + "']"); 
        //add css current section selector 
        current_section_menu.addClass('current-session'); 

        // Only prevent default if animation is actually gonna happen 
        event.preventDefault(); 
       } 
      } 
     }); 
}); 

和CSS是

.current-session{ 
    //your style here 
}