Q&A
前提・実現したいこと
画面をある程度スクロールすると、画面最下部に左から画面内に入ってくるメニューを実装したいです。
デモ
また、画面を一番上までスクロールすると、メニューを左へ動かして非表示にしたいです。
発生している問題・エラーメッセージ
スクロールして時間が経ってから、メニューが表示されす。
また、一番上までスクロールしてもメニューは消えてくれないです。
該当のソースコード
html
1<body> 2 <div class="red"></div> 3 <div class="blue"></div> 4 <div class="green"></div> 5 6 <div id="hoge"> 7 hoge 8 </div> 9 10 <script src="https://code.jquery.com/jquery-3.1.0.js"></script> 11</body>
js
1$(document).ready(() => { 2 3 const hoge = $("#hoge"); 4 $(window).scroll(() => { 5 if ($(this).scrollTop() > 200) return hoge.animate({left: 0}, 250); 6 hoge.animate({left: "-150%"}, 250); 7 }); 8 9});
css
1.red, .blue, .green { 2 width: 100%; 3 height: 1000px; 4} 5.red { 6 background: red; 7} 8.blue { 9 background: blue; 10} 11.green { 12 background: green; 13} 14 15#hoge { 16 background: white; 17 width: 100%; 18 height: 100px; 19 position: fixed; 20 bottom: 0; 21 left: -100%; 22}
試したこと
jQueryで横から出てくるスライドメニューを実装する方法 ｜ Gimmick log
上記ページを参考に実装してみたのですが、上手くいきませんでした。
回答1件
0
こんにちは。
スクロールするたびにアニメーションを登録してますので、数十回分のアニメーションが処理されています。
処理しきれなくて時間がかかっているのだと思います。
解決方法ですが、hoge.stop().animateのようにアニメーション中止を挟んでみてはいかがでしょうか。
投稿2020/10/30 02:02
総合スコア36981
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。