Q&A
実現したいこと
・トップ画面からスクロールすると左上にフワッとロゴが出てきて、トップ画面に戻ると消えるようにしたい。
前提
トップ画面からスクロールすると出てくるところまではうまくいったのですが、そこからいくらスクロールしても消えなくなってしまいます。
発生している問題・エラーメッセージ
エラーメッセージ
該当のソースコード
HTML
1<header class="header"> 2 <img src="./images/spica_logo.png" id="header-logo"> 3 <div class="header-area"> 4 <ul class="header-list"> 5 <li><a href="#">Menu</a></li> 6 <li><a href="#">ツアー</a></li> 7 <li><a href="#">星だより</a></li> 8 <li><a href="#">Access</a></li> 9 <li><a href="#">Vision</a></li> 10 </ul> 11 <div class="reservation"> 12 <a href="#">予約をする</a> 13 </div> 14 </div> 15 </header>
JS
1$(function () { 2 3 const headNav = $('#header-logo'); 4 5 $(window).scroll(function () { 6 7 if ($(this).scrollTop() > 100) { 8 9 // headNav.css("opacity", "1"); 10 11 headNav.animate({ opacity: 1 }, 1000, 'linear'); 12 13 } 14 15 else if ($(this).scrollTop() < 100) { 16 17 // headNav.css("opacity", "0"); 18 19 headNav.animate({ opacity: 0 }, 1000, 'linear'); 20 } 21 22 }); 23 24 }); 25
試したこと
//でメモになっている部分にするとうまくいくのですが、フワッとを実現できないので却下しました。なぜメモの部分はうまくいって、animateの方はうまくいかないのでしょうか。。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。