久々にUI実装系の記事を書きます。Google Analyticsで当ブログのオーガニック検索キーワードを見ていると、「スクロール」、「ヘッダーバー」を使った複合検索でのアクセスが目立っていたりします。確かに最近はスクロールを合わせてヘッダーバーを表示させたり、非表示にさせたりするUIが至るところで見受けられるようになっています。自分もそれほど気にはしていませんでしたが、今回どんな方法で実装できるか試してみることにしました。いくつか紹介していきます。 はじめに – ヘッダーバーの準備早速、スクロールするとスライドして現れる「ヘッダバー」の実装方法について説明していきます。「ヘッダーバーはページの読み込み時は非表示となっており、ページを下にスクロールすると表示される」という機能を実装していきます。 ベースとなるヘッダーバー HTML / CSSまず今回の実装のベースとなるヘッダーバーを以下の