scroll highlight

index.html

<!-- スクロール位置によって、ハイライトする項目が変化 -->

<header>
    <h1>Highlight Menu</h1>
    <nav>
      <ul>
        <li class="current"><a href="#">Section1</a></li>
        <li><a href="#">Section2</a></li>
        <li><a href="#">Section3</a></li>
        <li><a href="#">Section4</a></li>
      </ul>
    </nav>
</header>


<h1>Section1</h1>
<h1>Section2</h1>
<h1>Section3</h1>

script.js

$(function(){

  // ブラウザをスクロール
  $(window).scroll(function(){
  
    // 各コンテンツ位置とスクロール量の関係を調べる
    for(var i = 1; i <= 4; i++){
      if($("section:nth-child(" + i + ")").offset().top < $(window).scrollTop() + 300){
        // 現在のcurrentクラスを削除
        $("nav li").removeClass("current");

        // 新しくcurrentクラスを追加
        $("nav li:nth-child(" + i + ")").addClass("current");
      }
    }
  });
});

style.css

/* .current 変化時のスタイルを記述 */
.current {

}