縦スクロールしたらフワッとフェードインしてきてそのまま固定されるヘッダーの制作備忘録。
できるだけスクリプトがシンプルで、簡易に設置できるものを探していて、見つけて実践したらとても簡単に設置できたので、備忘録として記事に。
下記のサイトを活用させて頂きました。すばらしい記事に感謝です！
【jQuery】縦スクロールすると上からフワッと出てきて固定されるメニューヘッダ
設置方法は以下に簡単に記載しておきます。
スクリプト
jQuery本体の読み込みとヘッダ固定用のスクリプト
＊今回使用したサイトはWordpressなどのCMSではなかったので、スクリプトは内に記述しました。
|
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
「.XXXXXX」をフェードインさせるパーツのクラス名もしくはID名を記述。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.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; */ } |
表示方法を違う形が良い場合は以下のサイトも活用できます。
