(HTML,CSS)指定量スクロールした時点で上端にメニューを出す方法ウェブページをある程度スクロールした段階で、描画領域の上端にメニューなどの任意の「バー」を固定表示させる方法を解説。jQueryを使えば、「現在のスクロール位置」を取得してから「指定量以上スクロールされたかどうか」を判定して、ボックスの表示・非表示を切り替える......という処理も、とても簡単に実現できます。文宏ホームページ作成ガイドある程度スクロールされた時点で、上端に補足メニューなどを表示するある程度スクロールすると、描画領域の上端にメニューバーが現れる例ウェブページをある程度スクロールすると、ウインドウ(描画領域)の上端に、メニューなどを掲載したバーが現れるデザインのウェブサイトを見かけたことはないでしょうか。縦に長いページでは、ある程度スクロールされた時点で、ウインドウの上端に補助的なメニューが表示されるようにしておくと、(必要な箇所まで読み進んだ閲覧者が)次のアクションを起こす際の手助けになるかもしれません。ウェブページはたいてい上から下へ向かって読み進めるので、下方向にスクロールしている最中なら、ウインドウの上端に何かを追加表示しても、あまり邪魔には感じられないでしょう。閲覧者のスクロール量に応じて、上端に何かを追加表示させる方法スクロール位置を調べて、バーの表示・非表示を切り替えるこのような「ある程度スクロールされた時点で上端に何かを表示する」方法は、jQueryを活用すると簡単に作れます。過去にも似たような方法を、記事「スクロール量に応じてTOPへ戻るボタンを表示させる」で解説しました。今回は、以下の2つの方法を組み合わせて実現する方法をご紹介致します。「現在表示されている位置が、ページ上端から何ピクセルほどスクロールされた位置なのか?」という情報を得る。条件が満たされたときにだけ、ウインドウ(描画領域)の上端にバーを表示させる。どちらも、JavaScriptの有名ライブラリである「jQuery」を使うと、とても簡単に作成できます。ある程度スクロールされたときにだけ、上端にメニューが出るサンプルある程度スクロールすると、上部にメニューバーが表示されるサンプルページ本記事で解説するために、右図のようなサンプルページを用意しました。以下のリンク先で表示を確認してみて下さい。上記のページでは、下方向に350px以上スクロールすると、ウインドウ(描画領域)の上端に緑色のメニューバーが表示されます。逆に(上端から)350px以内の場所に戻ると、メニューバーは消えます。ブラウザのスクロールバーを操作して、メニューバーの表示・非表示が切り替わる様子を試してみて下さい。今回は、このような「指定量以上スクロールされたときにだけ、上端にメニューバーを表示する」ページの作り方を解説致します。それでは次のページから、jQueryを使って「ある程度スクロールされたときにページ上端にメニューバーを表示する」機能の作り方を見ていきましょう。About公式SNS日々の生活や仕事を楽しむための情報を毎日お届けします。