jQuery : 縦スクロールで上からフェードインする固定ヘッダー

縦スクロールしたらフワッとフェードインしてきてそのまま固定されるヘッダーの制作備忘録。

できるだけスクリプトがシンプルで、簡易に設置できるものを探していて、見つけて実践したらとても簡単に設置できたので、備忘録として記事に。

下記のサイトを活用させて頂きました。すばらしい記事に感謝です!

 

【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; */
	}

 

表示方法を違う形が良い場合は以下のサイトも活用できます。

ヘッダー・ナビゲーションを固定表示させるアイデア5つ(2017)

You may also like

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です