スクロールしたら、#footerが半透明になるJSを書いています。というかサイトで見つけて、実際に実装して動作を確認しました。
これを、画面最下部にスクロール到達したら、#footerの半透明を解除して、opacity:1で表示したいコードに編集したいのですが、ネットで調べてもわかりませんでした。
どなたか教えていただけないでしょうか?
<footer> <ul id="footer-scroll"> <li ><img src="/wp-content/uploads/img/start.png" alt="start"></li> <li ><img src="/wp-content/uploads/img/sns.png" alt="sns"></li> <li><a href='#'>Favorites</a></li> </ul> </footer>
#footer-scroll{ display:flex; justify-content:left; position: fixed; width: 100%; bottom: 0; left: 0; z-index: 99; }
$(function() { $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop != 0) $('#footer-scroll').stop().animate({'opacity':'0.2'},400); else $('#footer-scroll').stop().animate({'opacity':'1'},400); }); $('#footer-scroll').hover( function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('#footer-scroll').stop().animate({'opacity':'1'},400); } }, function (e) { var scrollTop = $(window).scrollTop(); if(scrollTop != 0){ $('#footer-scroll').stop().animate({'opacity':'0.2'},400); } } ); });
回答1件
あなたの回答
tips
プレビュー