スクロールするとある程度の高さまで来たときにヘッダを固定表示する方法
WordPressで作られたサイトやタテに長いランディングページなどでよく縦にスクロールしていくと途中でフワッと現れて画面上部に固定されるメニューヘッダってありますよね。
方法としてはjQueryのスライドアップ＆ダウンやCSSのopacity操作を組み合わせたもの、さらにはCSSのみで設定・実現できるものなど、多くの選択肢があって多数のサイトで解説されています。
今回クライアント様から、Wordpressで構築されたサイトでスクロールしたときに上部に縮小されたロゴとメニューを表示したいーとご要望いただいたんですが、このロゴとかを配置して自由にレイアウトが組めるようなプラグインとかスニペットってなかなか見当たらなかったんですよね。
そこで下記のサイトを参考にさせていただきながら、jQueryで動き・CSSを制御しながら縮小表示したロゴとメニューを組み合わせたヘッダを表示する機能を組み込むことができました。感謝！！
このような固定ヘッダの表示って他にも利用させていただくこと多いかもなので備忘録として。
表示デモと実装方法
まずは最終的な表示・動きのサンプルは以下のデモ画面みたいな感じ。
1.jQuery本体の読み込みとヘッダ固定用のスクリプト
<!-- Google Hosted LibrariesからjQuery取得 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- ▲ローカルに保存したjQuery本体へのリンクでももちろんOK -->
<!--for Scroll fix header -->
<script>
//scroll fix header
$(function () {
"use strict";
var flag = "view";
$(window).on("scroll", function () {
// scrollTop()が「200」より大きい場合
//画面トップから、ナビゲーションメニューまでの高さ（ピクセル）を指定すれば、メニュースクロールで
//消えていくタイミングでヘッダが表示されて固定される。
if ($(this).scrollTop() > 200) {
if (flag === "view") {
$(".fix-header").stop().css({opacity: '1.0'}).animate({
//”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
top: 0
}, 500);
flag = "hide";
}
} else {
if (flag === "hide") {
$(".fix-header").stop().animate({top:"-66px",opacity: 0}, 500);
//上にあがり切ったら透過度を0%にして背景が生きるように
//”▲.fix-header”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
flag = "view";
}
}
});
});
</script>
上記をまるっぽコピーして、「.fix-header」を適当なクラス名もしくはID名、「if ($(this).scrollTop() > 200) {」の数字部分をスクロール時に上から固定ヘッダを表示させるタイミング（下図参照）を指定してください。
2.HTMLソース
HTMLで特に気を付けることとかはありません。
通常はbodyタグの直下あたりに固定ヘッダ表示用のブロック（下記であればdiv class=”fix-header”）を作り、その下にロゴとメニューを表示するブロックを内包させます。
<body>
<!-- 固定ヘッダ表示用のブロック -->
<div class="fix-header">
<div class="fix-header-contents">
<!-- ロゴはfloat左寄せで表示 -->
<div id="fix-header-logo">
<a href="<?php bloginfo('url'); ?>"><img src="./images/sample-logo.png" alt="ete"></a>
</div>
<!-- メニューのブロックはfloatで右寄せ -->
<div id="fix-header-menus" class="cf">
<ul id="scroll-fix-menu" class="menu">
<li><a href="#">HOME</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
</div>
</div>
<!-- ここから常時表示させるヘッダ―部分 -->
<header>
<a href="＃"><img src="./images/sample-logo.png" alt="ete"></a>
</header>
<nav>
<div class="nav-container">
<ul id="gloval-nav" class="menu cf">
<li><a href="#">HOME</a></li>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</div>
<!-- /.nav-container -->
</nav>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqupa.</p>
メニュー部分は後述のCSSで左寄せフロートで表示させます。
3.CSSでデザイン周りを調整
あとはCSSで表示デザインを調整。
ヘッダ全体の表示に関わる共通設定部分は8行目～27行目あたり。
ここはそれぞれの環境に合わせて幅やカラーを変更してください。
あとは個別の環境に応じてフロートやマージンの設定を調整してバランスを取ります。
ここではロゴ部分にメインと同じ画像を使って180px×180pxサイズの元画像を幅・高さ54pxに縮小してヘッダ左側に表示させるようにしています。（49～51行目あたり）
/* for Scroll Fix Header */
header{
width:100%;
text-align: center;
}
.fix-header {
background-color:#646464;
line-height: 66px;
top: -66px;/* 上に隠す鷹さ */
left: 0;
text-align: center;
width: 100%;
margin: 0 auto;
color: #fff;
padding-top:15px;
position: fixed;
opacity:0;/* 最初読み込んだときは透過 */
z-index: 1000;/* 他のアイテムに対して最上位のレイヤーになるように */
/* opacity: 0; */
}
.fix-header-contents{
width:800px;
margin: 0 auto;
}
.fix-header ul{
list-style-type: none;
}
.fix-header li{
float:left;
margin-right:32px;
}
.fix-header li a,.fix-header li a:visited{
color: #fff;
text-decoration: none;
}
.fix-header li:last-child{
margin-right:0;
}
#fix-header-logo{
float:left;
}
#fix-header-logo img{
width:54px;
}
#fix-header-menus{
float:right;
text-align: right;
}
#scroll-fix-menu img{
padding-bottom: 5px;
border-bottom:2px solid #fff;
}
#scroll-fix-menu .current-menu-item img{
border-bottom:2px solid #0f142a;
}
#scroll-fix-menu a img:hover{
border-bottom:2px solid #0f142a;
transition:border-color 0.6s ease-out;
}
/* micro clearfx */
.cf:before, .cf:after {
content:"";
display:table
}
.cf:after { clear:both }
.cf { zoom:1 } /* For IE 6/7 */
nav{
width:100%;
background-color: #646464;
}
.nav-container{
width:800px;
margin: 0 auto;
}
nav ul{
padding:0;
list-style: none;
}
nav ul li{
float:left;
margin:10px 30px 10px 0;
}
nav ul li a,nav ul li a:visited{
color: #fff;
text-decoration: none;
}
article{
width:800px;
margin:20px auto ;
}
ま、個人的な備忘録ですが、上記のソースはご自由にコピペするなりしてお使いいただければ結構です。
