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