問題 × 解決策

スクロール位置を示すナビゲーションの構築方法

問題

スクロール位置を示すナビゲーションを構築するには?

解決策

ナビゲーションの各リンク先のスクロール位置を取得し、その地点までスクロールしたら該当するメニューにクラス「on」を付けます。

 

スクロール位置を示して、ユーサビリティを補助

ボリュームのあるページの場合、今いるスクロール位置を示すことによって、ユーザーが迷わないように補助することができます。
今回はスクロール位置を示すナビゲーションの構築方法をご紹介します。

DEMOはこちら

  • 以下のブロックをスクロールしていくと、左上のナビゲーションの該当のメニューがアクティブになります。

HTMLはこちら

<div id="block01" class="section-s inlink">
<div class="box-type01">
<h4 class="title-mark">ブロック01</h4>
<p class="text">ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。</p>
</div>
</div>
<div id="block02" class="section-s inlink">
<div class="box-type02">
<h4 class="title-mark">ブロック02</h4>
<p class="text">ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。</p>
</div>
</div>
<div id="block03" class="section-s inlink">
<div class="box-type03">
<h4 class="title-mark">ブロック03</h4>
<p class="text">ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。<br>
ダミーテキストです。ダミーテキストです。</p>
</div>
</div>
<ul class="scrollnav-list clearfix">
	<li class="block01"><a href="#block01">ブロック01</a></li>
	<li class="block02"><a href="#block02">ブロック02</a></li>
	<li class="block03"><a href="#block03">ブロック03</a></li>
</ul>

CSSはこちら

.scrollnav-list{
	position: fixed;
	top: 80px;
	left: 0;
	z-index: 100;
}
.scrollnav-list > li{
	display: block;
}
.scrollnav-list > li a{
	display: block;
	padding: 10px;
	color: #F15A24;
	text-decoration: none;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid #F15A24;
}
.scrollnav-list > li a:hover,
.scrollnav-list > li.on a{
	color: #ffffff;
	background-color: #F15A24;
}

ポイント!

  • ナビゲーションにクラス「on」に対するcssも設定します。

javascriptはこちら

if( $('.scrollnav-list').length ){
    // ナビゲーションの値を配列に格納
    var scrollnavs = new Array();
	for( var i = 0; i < $('.scrollnav-list > li').length; i++ ){
		scrollnavs.push( $('.scrollnav-list > li').eq(i).find('a').attr('href') );
	}
    // 各指定の要素のスクロール値を配列に格納
    var scrollparam = new Array();
    for (var j = 0; j < scrollnavs.length; j++) {
        if ($(scrollnavs[j]).offset()) {
            scrollparam[scrollnavs[j]] = $(scrollnavs[j]).offset().top - 10; // 数値丁度だとずれるので10px余裕を作る
        }
    }
    // スクロールイベントで判定し、該当するメニューにクラス「on」を付ける
    $(window).scroll(function () {
        for (var k = 0; k < scrollparam.length; k++) {
            if ($(window).scrollTop() > scrollparam[scrollnavs[k]] - 60) {
                $('.scrollnav-list > li').each(function() {
                    $(this).removeClass('on');
                });
                $('.scrollnav-list > li a[href='+scrollnavs[k]+']').closest('li').addClass('on');
            }
        }
    });
}

ポイント!

  • ナビゲーションの中のaタグのhref属性の値を配列に格納します。
  • 各指定の要素のスクロール値を配列に格納します。
  • スクロールイベントで現在のスクロール値「$(window).scrollTop()」が指定の要素のスクロール値を超えたら、該当するメニューにクラス「on」を付けます。

参考ページ

以下のサイトが、より詳しく解説してくれています。

【スクロール位置に応じてグローバルナビを点灯させる | begoingto】
http://begoingto.jp/demo/scroll_menu/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

fifteen − three =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧