【JavaScript】画面をスクロールしたときに指定した位置でヘッダーが消えるアニメーションを設定してみた！

2024/05/06

事前準備

ヘッダーを消すボーダーとしたい位置のHTMLに「.js-fade」クラスを付与します。

また、jqueryが正しく読み込まれていることを確認します。

js ファイル

jsファイルは以下のように記述します。
コメントも記載してありますので、参考にしてみてください。

// スクロールでヘッダーON/OFF
var mvh = $('.js-fade').height(); //「.js-fade」と付与した位置を取得（ここを目印にフェードアウトさせる）
var deadline = mvh / 20;

  $(window).scroll(function () {
    var top = $(window).scrollTop();
    if (deadline < top) {
      $('.l-header__nav').fadeOut(300); // デッドラインを超えたら、ヘッダー「.l-header__nav」を消す
    }
    if (deadline < top) {
      $('.c-logo').fadeOut(300);
    }

    if (deadline > top) {
      $('.l-header__nav').fadeIn(300); // デッドラインを戻ったら、ヘッダー「.l-header__nav」を表示
    }
	   if (deadline > top) {
      $('.c-logo').fadeIn(300);
    }
  });

「.c-logo」クラスのアニメーションも記述していますが、複数パーツをフェードさせるには上記のように利用します。

よかったらシェアしてね！