AboutデジタルIT・インターネットホームページ作成ページ途中のメニューバーをスクロール後に上端に固定ホームページ作成ページ途中のメニューバーをスクロール後に上端に固定ページを下方向にスクロールしたとき、「ヘッダ部分は消えるのに、メニューバーはウインドウ上部に張り付いて固定される」というデザインの作り方をご紹介。最初から上端にあるものを固定するのではなく、「最初は上端にはない要素(メニューなど)」を「スクロールによって上端に到達した時点で固定する」方法を解説。jQueryプラグインのjquery.sticky.jsを使うと、ほんの数行の追記だけで簡単に作れます。文宏ホームページ作成ガイドヘッダの下にあるメニューバーを、スクロール後には上端に固定する方法ウェブページの最上部に「ヘッダ」部分があり、そのすぐ下に「メニューバー」を掲載するようなページデザインをよく見かけます。このとき、ブラウザを下方向にスクロールすれば、当然「ヘッダ」も「メニューバー」も上方に消えて見えなくなります。「ヘッダは(スクロールによって)見えなくなる」ものの、「メニューバーだけは(スクロールによってウインドウ上端に到達した時点で)上端に固定される」というデザインもよく見かけます。下図のような感じの動作です。最初はヘッダの下部にあるメニューバーが、下方向へスクロールするとページ上端に固定される今回は、上図のように「最初は上端にはない要素(メニューなど)」を「スクロールによって上端に到達した時点で固定する」デザインの作り方をご紹介いたします。このようなデザイン(動作)を自力で作成すると面倒ですが、jQueryプラグインの「jquery.sticky.js」スクリプトを使うと、HTMLソースにほんの数行を追記するだけで簡単に作れます。今回ご紹介する「jquery.sticky.js」の使用例として、サンプルページ「ヘッダ直下のメニューバーをスクロール後に上端に固定」を用意していますので、お使いのブラウザで表示して動作を試してみて下さい。■サンプルページの表示と動作イメージ:サンプルページを表示したところ右図は、上記のサンプルページをブラウザ(Edge)で表示した例です。最上部に「ヘッダ」(水色部分)があり、その直後に「メニューバー」(黄緑色部分)があり、その後に「本文」(白色や灰色部分)が続いています。下方向にスクロールすると、当然メニューバー(黄緑色)も動くこのサンプルページを下方向にスクロールすると、「ヘッダ」も「メニューバー」も一緒にスクロールします。右図は少しだけ下方向にスクロールした例です。メニューバー(黄緑色)が上端に到達すると、それ以後は固定されるさらに下方向にスクロールすると、「メニューバー」の表示位置が「ブラウザのウインドウ(描画領域)の上端」に到達した時点で、メニューバーだけが上端に固定されます。これ以後は、どれだけ下方向にスクロールしても、メニューバーが見えなくなることはありません。このように、「スクロールによって消える寸前に、ウインドウ上端に固定する」デザインを作ってみましょう。上記のサンプルページで掲載しているようにメニューバーの表示に活用すると便利ですが、用途はメニューバーに限りません。どんな要素でも固定できます。それでは次のページで、「jquery.sticky.js」の具体的な使い方を見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。