縦スクロールしたらフワッとフェードインしてきてそのまま固定されるヘッダーの制作備忘録。
できるだけスクリプトがシンプルで、簡易に設置できるものを探していて、見つけて実践したらとても簡単に設置できたので、備忘録として記事に。
下記のサイトを活用させて頂きました。すばらしい記事に感謝です！
【jQuery】縦スクロールすると上からフワッと出てきて固定されるメニューヘッダ
設置方法は以下に簡単に記載しておきます。
スクリプト
jQuery本体の読み込みとヘッダ固定用のスクリプト
＊今回使用したサイトはWordpressなどのCMSではなかったので、スクリプトは内に記述しました。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
「.XXXXXX」をフェードインさせるパーツのクラス名もしくはID名を記述。
<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({
//”▲.XXXXXX”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
top: 0
}, 500);
flag = "hide";
}
} else {
if (flag === "hide") {
$(".XXXXXX").stop().animate({top:"-AApx",opacity: 0}, 500);
//”▲.XXXXXX”の部分は固定ヘッダとして表示させるブロックのID名もしくはクラス名に
//”▲-AApx”のAA部分は固定ヘッダの隠す高さを
flag = "view";
}
}
});
});
</script>
HTMLソース
body直下あたりに記述。
内容は特に指定はない。
CSSでデザイン周りを調整
記述が必要なのは以下
・最初読み込んだときは透過：opacity
・他のアイテムに対して最上位のレイヤーになるように：z-index
・スクロールするまで隠すために高さをマイナスマージンに
引用元サイトのCSS例
.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; */
}
表示方法を違う形が良い場合は以下のサイトも活用できます。
