そんな疑問にお答えします。
スクロールするとヘッダー（グローバルナビ）が上に流れていくけども、そのままスクロールすると再び上から下りてくるヘッダーを見たことはありませんか。
こういうタイプのやつです。
今回はこちらを作っていきます。
スクロールすると上から出てくるヘッダー
今回やりたいことは次の3点です。
- スクロールするとヘッダーが上から下りてくる
- 下りてきたヘッダーはそのまま画面上部で固定する
- 下りてきたヘッダーは背景色、高さを変更する
コード
まずコードを貼っておきます。
<header id="js-header" class="header"> <!-- idを設定 -->
<nav class="header-nav">
<ul class="header-nav-list">
<li class="header-nav-item">
<a class="header-nav-item-link" href="#">メニュー1</a>
</li>
<li class="header-nav-item">
<a class="header-nav-item-link" href="#">メニュー2</a>
</li>
<li class="header-nav-item">
<a class="header-nav-item-link" href="#">メニュー3</a>
</li>
</ul>
</nav>
</header>
<div class="fv"></div>
<section class="container"></section>a {
text-decoration: none;
}
ul {
list-style: none;
}
.fv {
background: url(画像パス) no-repeat center center / cover;
height: 700px;
}
.header {
background: #00CC99;
width: 100%;
}
/* クラスfixedが付与されたときのヘッダー背景色を指定 */
.header.fixed {
background: #FFCC00;
}
/* 上部に固定させるスタイルを用意 */
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
}
.header-nav-list {
display: flex;
justify-content: space-around;
}
.header-nav-item-link {
display: block;
color: #333;
height: 100px;
line-height: 100px;
}
/* クラスfixedが付与されたときのヘッダーの高さを指定 */
.fixed .header-nav-item-link {
height: 50px;
line-height: 50px;
}
.container {
height: 2000px;
background: #ddd;
}$(function () {
const headNav = $('#js-header');
$(window).scroll(function () {
// スクロール量が200px以上かつクラスfixedが付与されていないとき
if($(this).scrollTop() > 200 && headNav.hasClass('fixed') == false) {
//headerの高さ分上に設定（上から下りてくる動きにするため）
headNav.css({top: '-100px'});
//クラスfixedを付与
headNav.addClass('fixed');
//位置を0に設定し、上から下りてくるスピードを設定
headNav.animate({top: 0},1000);
}
// スクロール量が200px以下かつクラスfixedが付与されているとき
else if($(this).scrollTop() < 200 && headNav.hasClass('fixed') == true){
// クラスfixedを外す
headNav.removeClass('fixed');
}
});
});
解説
HTML
ヘッダーはこちらの方法で作っています。
【HTML/CSS】基本的なヘッダーの作り方【初心者でもわかるように徹底解説】
ヘッダーの高さはaタグを「display: block;」にして「height」で指定しています。
CSSとjQuery
「スクロール量によって任意のクラスのつけ外しを行う」という処理を記述します。
ここの仕組みと記述方法はこちらで詳しく解説しています。
今回は下りてきたヘッダーの背景色と高さを変更します。
つけ外しを行うクラスは「.fixed」です。
よって変更する背景色は「.header.fixed」としてスタイルを当てておきます。
また変更する高さは「.fixed .header-nav-item-link」にスタイルを当てておきます。
jQueryのポイントは「scrollTop()」です。
ここのスクロール量を基準にif文を記述します。
headNav.css({top: '-100px'});
headNav.addClass('fixed');
headNav.animate({top: 0},1000);ここの記述は ①ヘッダーが上から下りてくる ②ヘッダーを固定する という動きです。
ヘッダーの高さ分上に指定（-100px）し、「top:0」とすることで上から下りてくる見た目になります。
下りてくるスピードを1秒に設定しています。
今回の実装方法は
が理解できればほぼ同じ考え方で作れます。
ポートフォリオやコーディング練習でためしに一度作ってみましょう。
実装への難易度はきっと下がるはずです。
以上です。
投稿者 トシ
コメントを残す