はてなブログでスクロールすると画面上部に固定されるグローバルメニューを表示する方法（PCのみ）

スマホサイトなんかでよく見かける、画面をスクロールした時に画面の上に固定されるグローバルメニューをたまたま仕事で調べていたので、このブログにも実装してみました。

グローバルメニューの表示自体は以前書いた方法を利用します。

jitenshaya-se.hatenablog.com

まずは現状表示しているグローバルメニューをグローバルメニューの所まで画面をスクロールした時点で画面上部に張り付くようにしてみます。

処理方法

最初にグローバルメニューの縦方向の位置を取得しておきます。

次に画面をスクロールした際に今表示している画面の縦方向の位置を都度取得して、最初に取得したグローバルメニューの位置と比較します。

画面の方がグローバルメニューより下に下がった場合にグローバルメニューを画面の上に固定します。

javascriptのコードはこのような形になります。

<script>
<!-- jQueryの読み込みを待つ処理 -->
(function (cb) {
 if (typeof jQuery !== 'undefined') {
 jQuery(function () { cb(jQuery) });
 return;
 }
 var poll = arguments.callee;
 setTimeout(function () { poll(cb) }, 50);
})

(function ($) {
 //グローバルメニューの一番外側の要素を取得
 var globalmenu = $('#globalmenu');

 //グローバルメニューの高さを取得
 hTop = globalmenu.offset().top;

 //画面がスクロールされたときに起きるjQueryのイベント
 $(window).scroll(function () {
 //今表示している画面の縦方向の位置（画面が下に行くほど数字が大きくなる）
 //とグローバルメニューの位置を比較して、画面位置の方が下になったか判定
 if($(window).scrollTop() > hTop) {
 //グローバルメニューを画面の一番上（高さ0）に固定
 globalmenu.css('position', 'fixed').css('top', '0px');
 }else{
 //グローバルメニューを元の位置に固定
 globalmenu.css('position', 'static');
 }
 });
});
</script>

このままですと、グローバルメニューが画面内の要素の下に隠れてしまう場合があるので、画面の一番表側に表示するためにCSSを調整します。

CSSで見た目の調整

ついでに横の位置と見た目の調整も行います。

要素自体に背景色が無いままですと、重なって読めなくなってしまうので背景色をブログ全体の背景色と合わせます。

その他メニューの下にシャドーを入れてみたり色々試してみたのですが、自分に見た目を調整するセンスがないので、背景色のみの調整としてあります。

※こちらの方法を利用する場合は適宜スタイルを調整してください。

CSSのコードはこちらになります。

/*グローバルメニュー調整*/
#globalmenu {
 z-index: 9000;//一番表に表示
 background:#ebe9e3;//背景色を画面の背景に合せます。
 left:0px;
 width:100%;
}

#globalnavi ul li{display: inline-block;}
#globalnavi ul li a{
 text-decoration: none;
 display: block;
 padding: 10px ;
}

で、できた見た目がこんな感じです。

PCの場合はこれで問題ないのですが、このブログはレスポンシブデザインを使っているので、スマホの場合は下の画像ようにグローバルメニューの高さがかなりあり、これが画面の上部に固定されると全然記事が読めません。 

そこで、更にスマホの場合は見た目を変えます

・

・

・

すいません。

既にこちらの対応自体はこのブログに組み込んであるのですが、ここまで記事を整理して書くので燃え尽きたので、後日スマホ用グローバルメニューに切り替える部分まで実装した内容を書きます。

ごめんなさい。

※2015 6/25に続きを書きました。

jitenshaya-se.hatenablog.com