HTMLページ内に2ヶ所存在するナビゲーションメニューを各要素内にて追随させたい。

お世話になります。
この度の実装についてご指導よろしくお願いします。

■やりたこと

HTMLページ内に2ヶ所存在するコンテンツ要素A、Bに
それぞれナビゲーションメニューを設置し、スクロールさせると
ナビゲーションメニューがページ上面に固定（追随）され、
かつ、一定の場所までスクロールしたら消えるようにしたいです。

※HTMLの実装例
↓
↓スクロール
↓
別要素（この間はナビゲーションメニューは非表示）
↓
↓
「A要素」
この間、ナビゲーションを固定
↓
↓
別要素（この間はナビゲーションメニューは非表示）
↓
↓
「B要素」この間、ナビゲーションを固定
↓
↓
別要素（この間はナビゲーションメニューは非表示）
↓
↓

■やったこと・できないこと

以下のスクリプトを使い、
1ヶ所目(「A要素」)のナビゲーションをページ上面に固定・追随させ、
また一定の場所までスクロールすると消えるように設定できました。

【実装例】

<script>
// ナビゲーションを固定
(window.onload = function() {
    var $win = $(window),
        $main = $('.group'),　　　　　　　 　　　// A・B 要素
        $nav = $('#nav'),　　　　　　　　　　　　// ナビゲーション要素
        navPos = $nav.offset().top,　　　　　　　// ナビゲーションの位置指定
        botContTop = $("#stop").offset().top,　// ここまで来たら消える
	fixedClass = 'fixed';　　　　　　　　　　// ナビゲーションを固定(cssでfixさせる)

    $win.on('load scroll', function() {
      var value = $(this).scrollTop();

      if(navPos < value && value < botContTop) {
        $nav.addClass(fixedClass);
		$main.css('margin-top','15px');
	  
      } else {
        $nav.removeClass(fixedClass);
        $main.css('margin-top','0');
      }
    });
  });
</script>

■HTMLソース

<ul id="nav">
　<li class="tab"><a href="#category-top"></a></li>
　<li class="tab"><a href="#category-top"></a></li>
　<li class="tab"><a href="#category-top"></a></li>
</ul>
<div class="group">
・
・
・
</div>
<div id="#stop"></div>

…問題は2カ所目です。
コンテンツ要素Bのナビゲーションが
ページ上面に来ても何も動作しません。
この場合、いかにして2ヶ所目のナビゲーションメニューを
ページに追随させるか、どうぞご教授お願い致します。。

以上です。
どうぞよろしくお願いいたします。