問題
スクロール位置を示すナビゲーションを構築するには？
解決策
ナビゲーションの各リンク先のスクロール位置を取得し、その地点までスクロールしたら該当するメニューにクラス「on」を付けます。
スクロール位置を示して、ユーサビリティを補助
ボリュームのあるページの場合、今いるスクロール位置を示すことによって、ユーザーが迷わないように補助することができます。
今回はスクロール位置を示すナビゲーションの構築方法をご紹介します。
DEMOはこちら
- ※以下のブロックをスクロールしていくと、左上のナビゲーションの該当のメニューがアクティブになります。
ブロック01
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ブロック02
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ブロック03
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
ダミーテキストです。ダミーテキストです。
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/
コメント