jQueryを使用して現在表示されている要素を見つけてナビゲーションを更新

Question

初めてここにいるユーザー。私は通常、質問の答えを見つけることができますが、これを理解するのは難しい時期です。

目標：

私は、ページ上の要素までスクロールダウンしますクリックするサイドバーナビゲーションを持つ単一のページレイアウトを持っています。しかし、ユーザーがページを特定の要素にスクロールした場合、#id私は.activeになります。ナビゲーションリンクと対応する要素は、element#idとa[name]で同じ値を共有します。以下NikeBetterWorld.com

HTML例：：と同様に

<nav> 
    <a name="value">Link</a> 
</nav> 

<section id="value"> 
    content goes here 
</section> 

もちろん、そこに複数のセクション、リンク、要素、などがあります。しかし、これはそれの要点です。したがって、ユーザーがsection#valueにスクロールすると、a[value]はクラスをアクティブにします。

私はこれまでのところ、幾分助けになった回答を見つけましたが、まだいくつかの問題があります。 See this link for more information。

現在Javascriptを/ jQueryの：

$(document).scroll(function() { 
    var cutoff = $(window).scrollTop(); 
    var cutoffRange = cutoff + 200; 

    // Find current section and highlight nav menu 
    var curSec = $.find('.current'); 
    var curID = $(curSec).attr('id'); 
    var curNav = $.find('a[name='+curID+']'); 
    $(curNav).addClass('active'); 

    $('.section').each(function(){ 
     if ($(this).offset().top > cutoff && $(this).offset().top < cutoffRange) { 
      $('.section').removeClass('current') 
      $(this).addClass('current'); 
      return false; // stops the iteration after the first one on screen 
     } 
    }); 
}); 

問題：

上記のコードは、私は一つの大きな問題に実行しています限り動作しますが。 .currentの残りの要素全体を取得するのに問題があります。要素の上端がウィンドウの外に出ると、クラスが失われます。私は新しい要素の範囲を追加することでそれを修正しましたが、ユーザーが上にスクロールすると、要素の先頭がウィンドウの上部に達するまで、前の要素はクラス.currentを取得しません。ウィンドウの支配的な部分が目に見えて、.currentクラスを獲得したら、私はそれを好むでしょう。

ご意見、ご提案、ご感想をお待ちしております。

ありがとうございます！

Answer 1

セクションの下端を確認したいと思うように聞こえます。これを試してみて、すべて一緒に範囲を削除します。

if($(this).offset().top + $(this).height() > cutoff){ 

EDIT：フィドルを作成します。私はこれがあなたが描いているものだと思います。

http://jsfiddle.net/pdzTW/

Answer 2

yeeeahhh！解決策を得ました！

私はちょうどから変更します。私は常に現在のセクションを返すためにjQuerys "フィルタ" 機能を使用し

if ($(window).scrollTop() + 80 >= $(section).offset().top) { 

Answer 3

に

if ($(window).scrollTop() >= $(section).offset().top) { 

。

$currSection = $('section').filter(function() { 
    var $this = $(this); 
    var offset = $this.offset().top; 
    var view = winHeight/2; 

    return scrollTop >= offset - view && offset + ($this.outerHeight() - view) >= scrollTop; 
}); 

のようにスクロールリスナーで包み：

これだけ

$(window).on('scroll', function() { 
    // here we go ... 
}); 

。