ある程度スクロールされたときに、上端にメニューバーを表示する方法
指定のスクロール量に達した時点で、ウインドウ(描画領域)の上端にバーを表示するためには、大きく分けて以下の3つの記述が必要です。0. jQuery本体を読み込む
1. 画面上端に固定するメニューバーをHTMLとCSSで作る
2. スクロール量を判定して、バーの表示・非表示を切り替えるスクリプトを記述する
以下に順番に解説していきます。
0. jQuery本体を読み込む
今回ご紹介する方法では、JavaScriptのライブラリ「jQuery」を利用します。したがって、最初にjQuery本体を読み込んでおく必要があります。例えば、HTMLソース内に以下の1行を記述しておくと、(jQuery配布サイトが提供しているCDNサーバから)jQuery本体を読み込めます。よく分からない場合は、とりあえず以下の1行をHTML内に記述しておいて下さい。<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>なお、既に自分のウェブサーバ上にjQuery本体があるなら、そちらを読み込むよう記述しても問題ありません。
1. 画面上端に固定するメニューバーをHTMLとCSSで作る
画面(描画領域)上部に固定されるバーを作る
なお、本記事では例として「メニューバー」と言っていますが、実際に表示する内容はメニューでなくても問題ありません。何でも自由に掲載できます。
■HTMLソース：
必要なHTMLソースは、以下のように適当なブロックレベル要素を1つ用意するだけです。中身は何でも自由に記述して構いません。後でスクリプトから表示・非表示を切り替えられるよう、id属性を使って適当なid名を付加しておきます。下記の例では「headbar(ヘッドバー)」というid名を付けています。
<div id="headbar"> メニューバーの中身 </div>
■CSSソース：
次に、上記のHTMLを描画領域の上端に固定するよう、以下のようにCSSを記述します。
#headbar {
/* ▼上端に固定するCSS */
position: fixed;
top: 0px;
left: 0px;
width: 100%;
/* ▼バーの装飾 */
background-color: green; /* 背景色 */
color: white; /* 文字色 */
box-shadow: 3px 3px 3px rgba(0,128,0,0.5); /* 影 */
}
各行の意味は、以下の通りです。■上端に固定するCSS：
positionプロパティに値「fixed」を指定することで、(閲覧者のスクロール操作に影響せず)描画領域の指定位置に固定表示されるようになります。指定位置は、topプロパティ(上端からの距離)とleftプロパティ(左端からの距離)で指定します。ここでは、上端にぴったり合わせたいので、どちらにも「0px」を指定した上で、横幅を「100%」にしています。
■バーの装飾：
メニューバーの配色として、背景色(background-colorプロパティ)には緑色を、文字色(colorプロパティ)には白色を指定しています。さらに、バーに影を加えるため、box-shadowプロパティを使っています。この詳しい記述方法については「ボックスに影を付ける box-shadowプロパティ」ページを別途ご参照下さい。
さて、バーの作成が済んだら、最後に、スクロール量を判定して、バーの表示・非表示を切り替えるJavaScriptを記述しましょう。
