スクロールによって出てきたり消えたりするロゴを実装したい

Question

実現したいこと

・トップ画面からスクロールすると左上にフワッとロゴが出てきて、トップ画面に戻ると消えるようにしたい。

前提

トップ画面からスクロールすると出てくるところまではうまくいったのですが、そこからいくらスクロールしても消えなくなってしまいます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<header class="header">
        <img src="./images/spica_logo.png" id="header-logo">
        <div class="header-area">
            <ul class="header-list">
                <li><a href="#">Menu</a></li>
                <li><a href="#">ツアー</a></li>
                <li><a href="#">星だより</a></li>
                <li><a href="#">Access</a></li>
                <li><a href="#">Vision</a></li>
            </ul>
            <div class="reservation">
                <a href="#">予約をする</a>
            </div>
        </div>
    </header>

$(function () {

        const headNav = $('#header-logo');

        $(window).scroll(function () {

            if ($(this).scrollTop() > 100) {

                // headNav.css("opacity", "1");

                headNav.animate({ opacity: 1 }, 1000, 'linear');

            }

            else if ($(this).scrollTop() < 100) {

                // headNav.css("opacity", "0");

                headNav.animate({ opacity: 0 }, 1000, 'linear');
            }

        });

    });

試したこと

//でメモになっている部分にするとうまくいくのですが、フワッとを実現できないので却下しました。なぜメモの部分はうまくいって、animateの方はうまくいかないのでしょうか。。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

animateの方がうまく行かない理由は、スクロールするたびに実行するのでアニメーションがリセットされているからと推測されます。

目的の動作はコメントアウトしてる方の動作と、cssのtransitionプロパティを使うことで楽に実装可能です。

#header-logo {
  transition: opacity 1s;
}

Answer 2

スクロールすると、アニメーションが最初からやり直されます。これがおそらく、animate が機能しない理由です。

コメントアウトされたアクションと CSS 遷移プロパティを使用すると、必要なアクションを簡単に実行できます。 monkey mart