ナビゲーション・テキストの変更スクロール・オン時の色

Question

1つのページに異なるIDを持つdivのセクションがあります。例：

<section> 
    <div id="first"></div> 
</section> 

<section> 
    <div id="second"></div> 
</section> 

<section> 
    <div id="third"></div> 
</section> 

そして、私は例えば水平ナビゲーション言っています

<div class="nav"> 
    <ut> 
     <li><a href="#first">First</a></li> 
     <li><a href="#second">Second</a></li> 
     <li><a href="#third">Third</a></li> 
    </ul> 
</div> 

私が欲しいものがある：

1. 私は別のセクションまでスクロールすると、ナビゲーションテキストの色がすべき変化する。たとえば、<div id="second"></div>にスクロールすると、<li><a href="#second">Second</a></li>の色が変わるはずです。

2. ナビゲーションリンクのいずれかをクリックすると、その特定のセクションに直ちにジャンプできます。ナビゲーションテキストの色も変更する必要があります。

3. ナビゲーションをクリックして特定のセクションにジャンプすると、突然何も表示されずに表示されます。私はslideUp型のjqueryエフェクトをclickに追加したいと思います。

私はdevsを助けてください。

Answer 1

解決策が見つかりました。以下のコードはそれをすべて行います。 #idをURLから変更し、ナビゲーションフォントの色を変更します。

コード：

$(document).bind('scroll',function(e){ 
    $('div').each(function(){ 
     if ($(this).offset().top < window.pageYOffset + 10 && $(this).offset().top + $(this).height() > window.pageYOffset + 10){ 
      window.location.hash = $(this).attr('id'); 

      if($(this).attr('id') == "first"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav1").css('color', 'red'); 
      }else if($(this).attr('id') == "second"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav2").css('color', 'red'); 
      }else if($(this).attr('id') == "third"){ 
       $("#navlist a").css('color', 'white'); 
       $("#nav3").css('color', 'red'); 
      } 

     } 
    }); 
});