Q&A
html
1<body class="is_in"> 2 <div class="target-area"> 3フローティングを表示させたい範囲 4</div> 5 6<div class="floating"> 7<img src="img.jpg"> 8</div> 9 10</body>
js
1// 特定の範囲で表示・非表示する 2 3 jQuery(window).scroll(function() { 4 let scrollTop = jQuery(window).scrollTop(); // スクロール上部の位置 5 let areaTop = jQuery(".target-area").offset().top; // 対象エリアの上部の位置 6 let areaBottom = areaTop + jQuery(".target-area").innerHeight(); // 対象エリアの下部の位置 7 8 if (scrollTop > areaTop && scrollTop < areaBottom) { 9 jQuery("body").addClass("is_in"); // スクロールが対象エリアに入った場合 10 } else { 11 jQuery("body").removeClass("is_in"); // スクロールが対象エリアから出ている場合 12 } 13 });
css
1 .floating { 2 position: fixed; 3 opacity: 0; 4 transition: all 0.3s ease 0s; 5 6} 7 8.is_in .floating { 9 transform: translateX(0); 10 opacity: 1; 11}
##作成した記述
上記のコードでスクロールしてあるエリアの中ではフローティング要素を表示
それ以外のエリアでは非表示にした記述を作成しています。
#起きてしまうエラー
挙動自体はほぼ正しく作動するのですが
読み込むと表示範囲外のエリアでも一度フローティング要素が表示されてしまいます。
少しスクロールすると範囲外なら非表示になるのですが、スクロールの動作がないと非表示にならず困っています。
cssやjsなど記述を変化させたりしてみたのですがうまくいかず、
##改善したいこと
読み込んだ時点で非表示のエリアではフローティング要素を非表示にさせたいです。
何か足りない記述などがあるのか詳しい方のご教授よろしくお願いします。
回答1件
0
ベストアンサー
こんにちは。
ページロード時にもスクリプトを動かせばいいのではないかと思いました。
js
1 jQuery(window).on('scroll load', function () {
投稿2021/05/17 05:13
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/17 05:26
2021/05/17 05:30