ナビゲーションをスクロールで固定化する
ＨＴＭＬの装飾には、見た目のビジュアル面と、機能の動的部分があります。
ビジュアル面は文字通りデザインによる装飾ですが、動的な装飾には技術がいるものです。
ただ、動的な装飾はインパクトがることと、ユーザビリティの向上を図ることができます。
今回のナビゲーションをスクロールで固定化する動作は、一見むつかしそうですが、やってみたらそれほどソースコードも必要ではありません。
忘備録として残します。
このような機能装飾です。
百聞は一見に如かず。
どのようなものか、まずは見ていただければわかりやすいかと思います。
スクロールすると、ナビゲーション部分だけ自動で固定化され、スクロールを戻ると、ナビゲーションの固定化が自動で解除されます。
コツはスクロール位置とナビゲーション位置の比較
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関数を使用すると、特定スタイルシートが適用されているかどうか判別できますので、その特性を利用し判断しています。
思ったより簡単な割にはインパクトがありますので、ぜひ活用いただければ幸いです。
ホームページに関するお悩み事やご相談事がございましたら私どもまでご連絡ください。 鋭意ご対応申し上げます。
関連記事
