HOME > コラム > jQuery/JS Chips > スティッキーヘッダーを実現するJSソース「Headhesive.js」の使い方

スティッキーヘッダーを実現するJSソース「Headhesive.js」の使い方

コラム

スティッキーヘッダーが流行っているのかスティッキーヘッダーを多く見受けたので、スティッキーヘッダーを実現するJSソースを簡単WEBサイトテンプレート（PHP）に組み込んでみました。
Headhesive.jsはjQueryなどは使いませんので、単なるJavaScript記述（以降、js記述としますね）です。
因みに、スティッキーとは、粘度のある状態のことを意味していまして、ブラウザ上部に固定でくっついてくることから、スティッキーヘッダーと名付けられたそうな・・・。
今回、スマホ対応部分において、通常の簡単WEBサイトテンプレート（PHP）では手間が発生致しましたので、「スマホで横長メニュー部分だけをスクロールするCSS装飾」に実装しました。
「ちょっとは役に立ったかな？」や「ちょっと面白いな（笑）」みたいなことを感じられましたら、シェアして頂けますと幸いです。

jQuery/JS Chipsに投稿したコラム記事

スティッキーヘッダーを実現するJSソース「Headhesive.js」の使い方

jQueryは使わないでjs記述で実装

Headhesive.jsは、メニュー部分やロゴ部分などをブラウザ上部に固定するjs記述です。
通称「スティッキーヘッダー」というやつです。

どのコンテンツでも、指定したidの箇所までスクロールをすることで、その指定したid以降のコンテンツ表示時にブラウザ上部に固定することが出来る機能を持っています。
最近、流行りで色々なサイトで見ることが出来ますよね。
お馴染みの挙動をするというところです。

ただ、個人的に、スティッキーヘッダーってあまり好きになれなかったりしていました（苦笑）
コンテンツの表示領域が狭くなるのが気になってたんです。

ただ、あまり好きになれないからと言って”知らないのは問題だな”ということで、実装してみました！
レスポンシブの場合の対応などもあり、デフォルトのテンプレートではなく、グローバルメニューに工夫をしてみたバージョン（phptemp_spmenu_160706.zip）に実装しました。

では、進めていきたいと思います。

本家サイト

本家サイトです。
GitHubからプラグイン一式をダウンロードして頂けます。

ダウンロードと組み込みサンプル
組み込み済みファイルのダウンロード
phptemp_spmenu_hh_160914.zip
組み込み済みサンプル

サンプルです。

サンプルには全ページにHeadhesive.jsを設定しています。

元になるWEBサイトテンプレート（PHP）について

当サイト内の「SEOの基礎知識」の中のコンテンツです。

今回は、「スマホで横長メニュー部分だけをスクロールするCSS装飾」を実装したテンプレートに組み込んでいます。

ポイント
読み込ませたファイル

ヘッダ内で読み込ませたファイルです。
背景色の指定など、見た目にかかわる部分について修正をしました。
気になる箇所がありましたら、環境に併せて適宜修正してくださいね。 

<link href="/css/headhesive.css" type="text/css" rel="stylesheet" />
全ページに設定するjs記述

次に全ページで読み込ませなければいけないjs記述と読み込ませるべきjsファイルです。
今回は共通の読み込みファイル「sticky.php」をつくり、その中に一括で書き込んでいます。

記述内容は、テンプレート向けに修正をしています。
idやclassの指定は適宜、環境に併せて修正をしてくださいね。 

<script type="text/javascript" src="/js/headhesive.js"></script>
<script type="text/javascript">
// Set options
var options = {
offset: '#maincontents',
offsetSide: 'globalbg',
classes: {
clone:   'banner--clone',
stick:   'banner--stick',
unstick: 'banner--unstick'
    }
};

// Initialise with options
var banner = new Headhesive('.banner', options);

// Headhesive destroy
// banner.destroy();
</script>
全ページに組み入れたhtml

今回は、グローバルメニュー部分を固定表示させるようにしているため、グローバルメニューの外枠に当たる箇所にclassを追記します。 

<div id="globalbg" class="banner">
<div id="global">
<ul>
<li id="now"><a href="/">TOP</a></li>
<li><a href="/cate_01/">コンテンツ１</a></li>
<li><a href="/cate_02/">コンテンツ２</a></li>
<li><a href="/cate_03/">コンテンツ３</a></li>
<li><a href="/cate_04/">コンテンツ４</a></li>
</ul>
</div>
</div>
スティッキーヘッダーは多様な仕様がある

スティッキーヘッダーは、スクリプトによって仕様が大きく異なることがあります。

今回の件で言えば、classで指定している箇所をそのまま固定表示するだけですが、場合によっては、指定した箇所を非表示にして、隠していたコンテンツを表示するというロジックなどもあります。
ですので、それぞれのサイト運用環境にあった仕様を選ばないと固定観念に縛られることもありますので、そのあたりは気を付けたいところです。

その他、補足

WEBサイトテンプレート（PHP）の修正にあたって、以下の点に配慮しています。

  • 今回、サンプルにしたWEBサイトテンプレート（PHP）は「 phptemp_spmenu_160706.zip 」です。
締め

いかがでしたでしょうか？
特に難しいモノではないと思いますが、見た目を修正するところが手間かもしれませんね。

一応、オプションなどもあるので、その気になれば色々と挙動を変えることが出来るかもしれません。

先述の通りですが、スティッキーヘッダーは仕様の幅が広いので、たくさんのスクリプトに触れておきたいところかもしれません。
ということで、ここでも他のスティッキーヘッダーのスクリプトを取り上げたいと思います。

執筆 : 清水 隼斗

スティッキーヘッダーを実現するJSソース「Headhesive.js」の使い方の通常ページ