ホームページ制作 オフィスオバタ

ナビゲーションをスクロールで固定化する

HTMLの装飾には、見た目のビジュアル面と、機能の動的部分があります。
ビジュアル面は文字通りデザインによる装飾ですが、動的な装飾には技術がいるものです。

ただ、動的な装飾はインパクトがることと、ユーザビリティの向上を図ることができます。
今回のナビゲーションをスクロールで固定化する動作は、一見むつかしそうですが、やってみたらそれほどソースコードも必要ではありません。

忘備録として残します。

 

このような機能装飾です。

百聞は一見に如かず。
どのようなものか、まずは見ていただければわかりやすいかと思います。

ナビゲーションをスクロールで固定するサンプル

スクロールすると、ナビゲーション部分だけ自動で固定化され、スクロールを戻ると、ナビゲーションの固定化が自動で解除されます。

 

コツはスクロール位置とナビゲーション位置の比較

Jqueryによる固定化作業を行っているのですが、スクロールを位置を比較しているだけです。
最初にナビゲーションの上からの位置を取得し、スクロール位置がナビゲーション位置を超えたら固定化しています。

$(document).ready(function()
{
/** ナビの位置を取得 */
var navi_top = $(“nav”).offset().top;

$(window).scroll(function()
{
/** 現在のスクロール位置を取得 */
var top = window.pageYOffset;

if (navi_top <= top) /* スクロール位置がナビの位置を超えた ? */
{
if ($(“nav”).hasClass(“fix”) != true) /* まだ固定化が適用されていない ? */
{
/** ナビを固定化 */
$(“nav”).addClass(“fix”);
}
}
else
{
if ($(“nav”).hasClass(“fix”) == true) /* 固定化が適用されている ? */
{
/** ナビ固定化解除 */
$(“nav”).removeClass(“fix”);
}
}

});

});

 

ナビの固定化処理はスタイルシートで行う

ナビの位置を固定化する処理は、スタイルシートで記述しています。

.fix
{
position: fixed;
top: 0px;
z-index: 9999;
width: 100%;
}

ナビ部分に、上記のスタイルシートを追加すると固定化されます。

これをJqueryのスクロール処理と組み合わせています。
JqueryのaddClass関数は、スタイルシートを追加することが可能です。
逆にremoveClass関数は、スタイルシートを解除します。

この関数をつかって、スクロール位置が特定位置になったら、ナビに固定化スタイルシートを追加し、スクロール位置が戻ったら固定化スタイルシートを解除しているのです。

ただ、これだけだと重複追加、多重解除処理を行ってしまうため、「固定スタイルシートが適用されていないときのみ適用」「固定化スタイルシートが適用されているときのみ解除」する処理をきじゅつします。

具体的には、hasClass関数を使用すると、特定スタイルシートが適用されているかどうか判別できますので、その特性を利用し判断しています。

 

思ったより簡単な割にはインパクトがありますので、ぜひ活用いただければ幸いです。

モバイルバージョンを終了