jQueryのページスクロールがnavbar hrefをアクティブクラスに変更しない

Question

私は1ページのウェブサイトを持っています。下にスクロールすると、その特定のdivの位置に到達したときに、自分の（固定された）ナビゲーションバーリンクがステータスをアクティブに変更します。

jQueryを使用しましたが、動作しません。ここに私のコードは次のとおりです。ここで

// SMOOTH SCROLLING PAGES 

$(document).ready(function() { 
$(document).on("scroll", onScroll); 

//smoothscroll 
$('a[href^="#"]').on('click', function (e) { 
    e.preventDefault(); 
    $(document).off("scroll"); 

    $('a').each(function() { 
     $(this).removeClass('active'); 
    }) 
    $(this).addClass('active'); 

    var target = this.hash, 
     menu = target; 
    $target = $(target); 
    $('html, body').stop().animate({ 
     'scrollTop': $target.offset().top+2 
    }, 800, 'swing', function() { 
     window.location.hash = target; 
     $(document).on("scroll", onScroll); 
    }); 
    }); 
}); 

function onScroll(event){ 
var scrollPos = $(document).scrollTop(); 
$('main-navigation a').each(function() { 
    var currLink = $(this); 
    var refElement = $(currLink.attr("href")); 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('main-navigation ul li a').removeClass("active"); 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
    }); 
}; 

は私のHTMLです：

<nav id="main-navigation"> 
    <ul> 
    <li class="active"><a href="#site-main">Home</a></li> 
    <li><a href="#a">A</a></li> 
    <li><a href="#b">B</a></li> 
    <li><a href="#c">C</a></li> 
    <li><a href="#d">D</a></li> 
    </ul> 
</nav> 
<div id="a">DIV Alpha</div> 
<div id="b">DIV Bravo</div> 
<div id="c">DIV Charlie</div> 
<div id="d">DIV Delta</div> 

スムーズスクロールは完璧に動作しますが、私はバックアップのdiv #dからアクティブ状態が変化しないナビゲーションバー李をスクロールしたとき。

Answer 1

onScroll機能の必要がありませんが、私はあなたが探しているものを私はそれを願って、あなたのためのフィドルを準備 - http://jsfiddle.net/skyr9999/dpuvcj5w

<div class="content"> 
    <div id="site-main">DIV Home</div> 
    <div id="a">DIV Alpha</div> 
    <div id="b">DIV Bravo</div> 
    <div id="c">DIV Charlie</div> 
    <div id="d">DIV Delta</div> 
</div> 

<nav id="main-navigation"> 
    <ul> 
     <li><a class="menuitem" href="#site-main">Home</a></li> 
     <li><a class="menuitem" href="#a">A</a></li> 
     <li><a class="menuitem" href="#b">B</a></li> 
     <li><a class="menuitem" href="#c">C</a></li> 
     <li><a class="menuitem" href="#d">D</a></li> 
    </ul> 
</nav> 

JS

$(document).ready(function() { 

    $('a[href^="#site-main"]').addClass('active'); 

//smoothscroll 
    $('.menuitem').on('click', function (e) { 
     e.preventDefault(); 
     // $(document).off("scroll"); 
     var athis = this; 
     var target = this.hash, 
       menu = target; 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top + 2 
     }, 800, 'swing', function() { 
      window.location.hash = target; 
      $('.menuitem').removeClass('active'); 
      $(athis).addClass('active'); 

     });  
    });  

    $(window).scroll(function (event) { 
     var scrollPos = $(document).scrollTop(); 
     if (scrollPos === 0) 
     { 
      $('a[href^="#site-main"]').addClass('active'); 
      return; 
     }  
     $('.menuitem').each(function() { 
      var currLink = $(this); 
      var refElement = $(currLink.attr("href")); 
      if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
       $('.menuitem').removeClass("active"); 
       currLink.addClass("active"); 
      } else { 
       currLink.removeClass("active"); 
      } 
     });  
    })  
}); 

あなたが含まれていなかったので任意のCSS、私は少しを即興するが、それはうまくいくようだ。

CSS

#a,#b,#c,#d,#site-main { height: 400px;} 
#main-navigation { 
    position: fixed; 
    top: 0px; 
    right:10px;   
} 

#main-navigation ul li { 
    display: inline; 
} 

.active { 
    background: #f00; 
} 

アップデート1 私はあなたがアイテム

Answer 2

あなたが代わりにリストとアイテムをループしており、#表記とIDセレクタを修正：

$('#main-navigation li').each(function() { //<---correct id selector 
    var currLink = $(this); 
    var refElement = $(currLink.find('a').attr("href")); //<---find the anchor here 
    if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
     $('#main-navigation ul li').removeClass("active"); //<---and here 
     currLink.addClass("active"); 
    } 
    else{ 
     currLink.removeClass("active"); 
    } 
}); 

Answer 3

あなたはそれが追加されます。この https://github.com/davist11/jQuery-One-Page-Nav

を達成するために、このクールな小さなプラグインを使用することができますあなたが特定のdivまたはセクションにいるときに現在のクラス このヘルプを期待してください：

Answer 4

$('a').each(function() { $(this).removeClass('active'); }) $(this).addClass('active');

$('a').each(function() { 
    $(this).parent().removeClass('active'); 
}) 
$(this).parent().addClass('active'); 

完全なコード：

$('a[href^="#"]').on('click', function (e) { 
e.preventDefault(); 
$(document).off("scroll"); 

$('a').each(function() { 
    $(this).parent().removeClass('active'); 
}) 
$(this).parent().addClass('active'); 

var target = this.hash, 
    menu = target; 
$target = $(target); 
$('html, body').stop().animate({ 
    'scrollTop': $target.offset().top+2 
}, 800, 'swing', function() { 
    window.location.hash = target; 
}); 

}）。

ここ