スクロールの位置に応じてナビゲーションのカレント表示を変更

2014/8/20

縦長のサイトでコンテンツの位置に応じて、ナビゲーションのカレント表示を変更する方法です。

HTML

<ul id="nav">
<li><a href="#section01">menu</a></li>
<li><a href="#section02">menu</a></li>
<li><a href="#section03">menu</a></li>
</ul>
</div>
<div class="section" id="section01">
.....
</div>
<div class="section" id="section02">
.....
</div>
<div class="section" id="section03">
.....
</div>

CSS

body{
    padding-top: 100px;
}
#nav{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}
#nav ul{
    overflow: hidden;
    width: 100%;
}
#nav li{
    display: block;
    float: left;
    width: 33.3333%;
    padding: 10px 0;
    text-align: center;
    background-color: #ccc;
}
#nav li.on{
    background-color: #f00;
}
.section{
    height: 500px;
}

ナビゲーションはTop固定にします。

jQuery

$(function(){
    var margin = 100,   //ウインドウ上部からどれぐらいの位置で変化させるか
    sectionTop = new Array, //sectionのTop位置格納用
    current = -1;   //現在のカレント位置

    //(1)各sectionの縦位置を取得
    $(&#039;.section&#039;).each(function(i) {
        sectionTop[i] = $(this).offset().top;
    });

    //init
    changeNavCurrent(0);

    //スクロールした時の処理
    $(window).scroll(function(){
        scrollY = $(window).scrollTop();

        //(2)各セクションの位置とスクロール位置を比較して、条件にあったらchangeNavCurrentを実行
        for (var i = sectionTop.length - 1 ; i >= 0; i--) {
            if (scrollY > sectionTop[i] - margin) {
                    changeNavCurrent(i);
                break;
            }
        };
    });
    //(3)ナビの処理
    function changeNavCurrent(curNum) {
        if (curNum != current) {
            current = curNum;
            curNum2 = curNum + 1;//HTML順序用
            $(&#039;#nav li&#039;).removeClass(&#039;on&#039;);
            $(&#039;#nav li:nth-child(&#039; + curNum2 +&#039;)&#039;).addClass(&#039;on&#039;);
        }
    };
});

(1)
各セクションのtopの位置を取得します。
下記のような結果になります。

sectionTop[0]=100
sectionTop[1]=600
sectionTop[2]=1100

(2)
各セクションの位置とスクロール位置を順番に比較して、条件にあったらchangeNavCurrentを実行します。
例えばスクロール位置が800の場合、
sectionTop[2]ではfalse、sectionTop[1]ではtrueとなるのでchangeNavCurrent(1)が実行されます。

今回のサンプルでは更にmarginという変数を使い、比較対象となるセクションのtopの位置を調整してます。
この値はサイトの構成によって適時調整するといいでしょう。

(3)
渡された引数を使って、カレントのナビゲーションのクラス属性にonを付与します。

DEMO