jquery - Detect current Section with javascript -

i'm working on onepage website. have fixed menu in pure html, here's code :

<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> 

then change "current" section apply different style selected menu. here's 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'); } 

then apply css :

nav a.current, nav a:hover{     background: #f0f0f0;     color: #e46c51; } 

to call function, use :

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

but doesn't seems work. can me?

thank much,

nicolas

$(function () {     // select links hashes     $('a[href*="#"]')       // remove links don't link       .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) + ']');               // target exist?               if (target.length) {                   //remove 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');                    // prevent default if animation gonna happen                   event.preventdefault();               }           }       }); }); 

and css is

.current-session{     //your style here }