HOME > Web > jQuery練習: jQuery導入～ナビゲーションバー固定＆トップに戻るボタン

jQuery練習: jQuery導入～ナビゲーションバー固定＆トップに戻るボタン

色々なサイトを見て、サイトのナビゲーションバーを固定できないかと考えるようになり、色々と調べてみたところ実装できたので紹介したいと思います。CSSだけでは実装不可でjQueryの導入が必要だったので、jQuery導入の仕方から勉強しました。jQueryの導入方法は色々なサイトを参考にしましたが、特にこの2つのサイトの情報が非常に役立ちました。

jQueryファイルの読み込み方法(CDNや直接ダウンロード)
初歩的なjQueryプラグインの設置方法

もくじ

  1. jQueryの導入
  2. ナビゲーションバー固定
    1. スクリプト
    2. HTML
    3. CSS
  3. 「トップに戻る」ボタンの実装
    1. スクリプト
    2. HTML
    3. CSS

jQueryの導入

まずはjQuery本体をサイトに読み込ませるため下記コードをheadタグ内に追記します。

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js" type="text/javascript"></script>

jQueryの導入自体はこれで終了です。思っていたよりも簡単すぎた印象です。これで各種ギミックの導入準備が済んだので、次に進みます。

今回導入を考えていたのは、ページトップの左端がHOMEから始まるナビゲーションバーを、スクロールしてページ上部にぶつかった時点で固定表示にする、というもの。実装にあたっては、殆どこちらのサイトのコードを使わせていただきました。ありがとうございました。

ページ途中にあるグローバルナビなどをスクロール時にトップに固定するjQuery

このページに書かれているコードでほぼ実装可能ですが、自分のサイトに合わせて多少いじりました。実際のスクリプトを載せておきます。このスクリプトをプラグイン化するまでの技術はまだ自分にはなく、スクリプトは直接bodyタグを閉じる直前の箇所に書いています。

<script type="text/javascript">
jQuery(function($) {

var nav = $('#fixedBox'),
offset = nav.offset();
var topBtn = $('#page-top');

$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
} else {
nav.removeClass('fixed');
}
});
});
</script>

これはつまり、fixedBoxというIDがある要素がトップの位置に来た時.fixedというクラスを付与し、トップの位置でなくなれば.fixedというクラスを削除、ということが書かれており、次にやることはHTMLとCSSの編集です。

header.phpファイル内のナビゲーションバーに関わる記述の箇所を探し、fixedBoxというIDを追記します。これはサイトにより様々になりますが、自分の場合.site-barという要素のあるdiv内にIDを付与することで実装できました。

<div id="fixedBox" class="site-bar">

この時点ではまだ、ナビゲーションバーがスクロールしてページ上部にぶつかった時点で.fixedというクラスが追加されるだけなので、実際にバーが固定されるよう.fixedクラスの詳細をCSSファイルに書き込みます。バーの固定はある程度画面が大きいときにのみ起こるよう設定したかったので、iPadを横向きに使ったあたりのサイズから反映されるよう@media screenの設定も行っています。

@media screen and (min-width: 783px) {
.fixed {
position: fixed;
padding: 0px !important;
top: 0;
margin-left: auto;
margin-right: auto;
right: 0;
left: 0;
max-width: 1220px;
z-index: 10000;
background-color: rgba(0,0,0,.5);
}
}

position:fixedにより上部に固定され、max-widthやpadding、marginなど細かい設定はサイトの状況によりけりです。今回は、上部に固定された時点で少し縮み、背景色が透けるというアニメーションを付けたかったのでpaddingが0px、背景色がrgba(0,0,0,.5)に切り替わるよう設定しています。また、突然切り替わるのではなく0.3秒くらいかけて切り替わるよう、.site-barクラスにtransition設定をしています。この辺はナビゲーションバーの固定と直接関係ないので今回は割愛します。

「トップに戻る」ボタンの実装

他のサイトにあって自分のサイトにないものの一つに「トップへ戻る」ボタンがありました。WordPressのテンプレートによっては最初から実装しているものもありますが、このサイトで使っているFirstというテンプレートにはそれがなく、知識がない時点では諦めていましたが今回jQueryを使ってみて出来そうな気がしたのでやってみました。実装にあたってはこちらのサイトを参考にさせて頂きました。

jQueryでスクロールすると表示する系いろいろ

どこまでスクロールしたら現れるようにしようか、と色々考えていたのですが、ナビゲーションバーが固定されたのと同時に現れるように設定できれば、スクリプトをまとめられるぞ！と思い、ナビゲーションバーがページ上部にぶつかったのと同時に「トップへ戻る」ボタンがページ右下に現れるようにしました。スクリプト、HTML、CSSと紹介していきます。

スクリプト

上で紹介したスクリプトへ追記したものです。

<script type="text/javascript">
jQuery(function($) {

var nav = $('#fixedBox'),
offset = nav.offset();
var topBtn = $('#page-top');

$(window).scroll(function () {
if($(window).scrollTop() > offset.top) {
nav.addClass('fixed');
topBtn.addClass('show');
} else {
nav.removeClass('fixed');
topBtn.removeClass('show');
}
});
//スクロールしてトップ
topBtn.click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>

追記した内容は、page-topというIDがある要素がトップの位置に来た時.showというクラスを付与し、トップの位置でなくなれば.showというクラスを削除、ということ。さらにpage-topというIDをクリックした場合はスクロールしてトップに戻る、というのも書いてあります。次にやることはHTMLとCSSの編集です。

HTML

このコードをfooter.phpファイル内のfooterタグ開始直前に書き込みました。

<a id="page-top" title="トップへ戻る"><i class="fa fa-angle-up"></i></a>

faというのはFontAwesomeというウェブサイトで使用できる様々なアイコンのことで、導入にはhead内に下記コードを書き込みます。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" media="all">

あとは装飾するためにCSSを書きます。

CSS

ナビゲーションバーがページトップにぶつかっていない状態ではopacity:0で位置はページ一番下からさらに-45pxの位置、ボタンの大きさは40px x 40pxで、角を丸くしています。.showクラスが付与された瞬間、ページ一番下から11pxの位置に0.5秒かけて出てくる、というギミックです。マウスホバーしたときのエフェクトなども付与していますが、今回の内容には直接関係ないので割愛します。

#page-top {
position: fixed;
opacity: 0;
visibility: hidden;
right: 11px;
bottom: -45px;
background-color: rgba(0,0,0,.5);
width: 40px;
height: 40px;
text-align: center;
font-size: 22px;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

#page-top.show {
opacity: 1;
visibility: visible;
bottom: 11px;
}

まとめ

取り掛かる前はjQueryやJSに「かなり難しいもの」という認識があったのですが、今回実装したものは簡単にまとめると；

  • ある条件（スクロール、など）でクラスが追加される、というスクリプトを書く
  • クラスに応じたCSSが発動される

ということになり、思っていたよりも非常にシンプルでした。今後も実装できるかな、と思ったものは積極的に勉強してウェブサイトに導入していきたい。