グローバルナビゲーション
-追従メニューの現在地ハイライト-
See the Pen 5-1-26 追従メニューの現在地ハイライト by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.
「Result」内をスクロールして動きを確かめてね!
動きを実現する仕組み
現在地を表示させたいエリアのHTML には同じ名前のクラス名を付与。
jQuery でエリアにつけられたクラス名の● 番目~ ●番目までをスクロールしている間は、追従メニューの<li>の●番目に現在地クラスをつける。
CSS のposition:fixed; でメニューを固定しているため、クラス名からクラス名までの距離をjQueryで計算する際には、追従メニュー分の高さを引く。
[使用するライブラリ]
* jQuery
HTMLの書き方
- head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-1-26.css"> </head>
- body内にリンク元のHTMLとリンク先のHTMLを記載します。
<header id="header"> <h1>Logo</h1> <nav id="g-nav"> <ul> <li><a href="#area-1">Area1</a></li><!--現在地のliにはJavaScriptでcurrentというクラス名がつきます--> <li><a href="#area-2">Area2</a></li> <li><a href="#area-3">Area3</a></li> <li><a href="#area-4">Area4</a></li> </ul> </nav> </header> <main> <section class="scroll-point" id="area-1"> <h2>Area 1</h2> <p>内容が入ります。</p> <!--/area1--></section> <section class="scroll-point" id="area-2"> <h2>Area 2</h2> <p>内容が入ります。</p> <!--/area2--></section> <section class="scroll-point" id="area-3"> <h2>Area 3</h2> <p>内容が入ります。</p> <!--/area3--></section> <section class="scroll-point" id="area-4"> <h2>Area 4</h2> <p>内容が入ります。</p> <p>内容が入ります。</p> <!--/area4--></section> <!--/main--></main> <footer id="footer"> <small>© copyright.</small> </footer>
- body 終了タグ直前に jQuery、動きを制御する自作のJS の2 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <!--自作のJS--> <script src="js/5-1-26.js"></script> </body>
自作のCSS内の書き方
/*========= 現在地表示のためのCSS ===============*/
#header{
position: fixed;/*header固定*/
height: 70px;/*Headerの高さ設定*/
width:100%;
display: flex;
justify-content: space-between;
align-items: center;
background:#333;
color:#fff;
text-align: center;
}
/* 以下はレイアウトのための CSS*/
nav ul{
list-style: none;
display: flex;
}
nav ul li a{
display: block;
text-decoration: none;
color: #666;
padding:10px;
transition:all 0.3s;
}
nav ul li.current a,
nav ul li a:hover{
color:#fff;
}
@media screen and (max-width:768px) {
nav ul li a:hover{
color: #666;
}
nav ul li.current a {
color:#fff;
}
}
section{
padding: 300px 0;
}
footer{
padding: 50px 0;
}
自作のJS内の書き方
//基準点の準備
var elemTop = [];
//現在地を取得するための設定を関数でまとめる
function PositionCheck(){
//headerの高さを取得
var headerH = $("#header").outerHeight(true);
//.scroll-pointというクラス名がついたエリアの位置を取得する設定
$(".scroll-point").each(function(i) {//.scroll-pointクラスがついたエリアからトップまでの距離を計算して設定
elemTop[i] =Math.round(parseInt($(this).offset().top-headerH));//追従するheader分の高さ(70px)を引き小数点を四捨五入
});
}
//ナビゲーションに現在地のクラスをつけるための設定
function ScrollAnime() {//スクロールした際のナビゲーションの関数にまとめる
var scroll = Math.round($(window).scrollTop());
var NavElem = $("#g-nav li");//ナビゲーションのliの何番目かを定義するための準備
$("#g-nav li").removeClass('current');//全てのナビゲーションの現在地クラスを除去
if(scroll >= 0 && scroll < elemTop[1]) {//スクロール値が0以上 .scroll-point 1つめ(area-1)の高さ未満
$(NavElem[0]).addClass('current');//1つめのliに現在地クラスを付与
}
else if(scroll >= elemTop[1] && scroll < elemTop[2]) {//.scroll-point 1つめ(area-1)以上.scroll-point 2つめ(area-2)未満
$(NavElem[1]).addClass('current');//2つめのliに現在地クラスを付与
}
else if(scroll >= elemTop[2] && scroll < elemTop[3]) {//.scroll-point 2つめ(area-2)以上.scroll-point 3つめ(area-3)未満
$(NavElem[2]).addClass('current');//3つめのliに現在地クラスを付与
}
else if(scroll >= elemTop[3]) {// .scroll-point 3つめ(area-3)以上
$(NavElem[3]).addClass('current');//4つめのliに現在地クラスを付与
}
}
//ナビゲーションをクリックした際のスムーススクロール
$('#g-nav a').click(function () {
var elmHash = $(this).attr('href'); //hrefの内容を取得
var headerH = $("#header").outerHeight(true);//追従するheader分の高さ(70px)を引く
var pos = Math.round($(elmHash).offset().top-headerH); //headerの高さを引き小数点を四捨五入
$('body,html').animate({scrollTop: pos}, 500);//取得した位置にスクロール※数値が大きいほどゆっくりスクロール
return false;//リンクの無効化
});
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
PositionCheck();/* 現在地を取得する関数を呼ぶ*/
ScrollAnime();/* ナビゲーションに現在地のクラスをつけるための関数を呼ぶ*/
});
// ページが読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
PositionCheck();/* 現在地を取得する関数を呼ぶ*/
ScrollAnime();/* ナビゲーションに現在地のクラスをつけるための関数を呼ぶ*/
});
$(window).resize(function() {
//リサイズされたときの処理
PositionCheck()
});
この技術を使ったサンプルサイト
バリエーション
を見る
- ドロップダウンメニュー(上)
- ドロップダウンメニュー(左)
- ドロップダウンメニュー(写真付 上ナビ)
- ドロップダウンメニュー(写真付 左ナビ)
- スクロールすると上部に固定
- スクロール途中から上部固定
- スクロールするとハンバーガーメニューに変化
- スクロール途中からヘッダーの高さが小さくなる
- スクロール途中でヘッダーが消え、上にスクロールすると復活
- スクロールすると位置が固定して追従
- クリックしたらナビが上から下に出現
- クリックしたらナビが下から上に出現
- クリックしたらナビが左から右に出現
- クリックしたらナビが右から左に出現
- クリックしたら背景が全面に広がる
- クリックしたら円形背景が拡大(上から)
- クリックしたら円形背景が拡大(下から)
- クリックしたら円形背景が拡大(右から)
- クリックしたら円形背景が拡大(左から)
- クリックしたら円形背景が拡大(右上から)
- クリックしたら円形背景が拡大(右下から)
- クリックしたら円形背景が拡大(左上から)
- クリックしたら円形背景が拡大(左下から)
- クリックしたら円形背景が拡大(中央から)
- クリックしたらナビ背景コンテンツがぼかされる
「機能」に関わる
動き一覧
基礎から学びたい方へ
Webサイトの動きを実現する仕組みと
準備について基礎から学びたい方は
下記をまず読み、基本を理解してから
コピペしましょう
Webサイトの動きを
実現する仕組みと準備
書籍情報
紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。
もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!