フローティングボタンが指定位置の前で非表示になる

実現したいこと

フローティングボタンを指定の位置に達したら非表示にしたいです

発生している問題・分からないこと

フローティングボタンを設置しています。
フッターと被らないようにフッター直前になったら非表示にするように設定しているのですが、途中で非表示になってしまいます。

初めてページを開いたときにおこる現象で、そのあとにページをリロードすると指定したフッターの直前で非表示になります。
初めてページを開いたときからきちんと正常に作動させたいです。

エラーメッセージ

error
1エラーメッセージは表示されません。

該当のソースコード

html
1<body> 
2<div class="floatbtn_inner start">
3    <div class="floatbtn">
4      <a href="h#"><img src="img/_floatbtn.jpg" alt=""></a>
5    </div>
6  </div>
7
8<!--中略 -->
9
10<div class="end"></div>
11<footer></footer>
12
13
14<script>
15var scrollStart = $('.start').offset().top; //ページ上部からの距離を取得
16var scrollEnd = $('.end').offset().top; //ページ上部からの距離を取得
17var windowHeight = $(window).height(); //ウインドウの高さを取得
18var distance = 0;
19 
20$(document).scroll(function(){
21 distance = $(this).scrollTop(); //スクロールした距離を取得
22 
23 if (scrollStart <= distance) { //スクロール距離がstartの位置を超えたら
24 $('.start').addClass('fixed'); //fixedというclassを追加
25 } else if (scrollStart >= distance) { //スクロールがページ上部まで戻ったら
26 $('.start').removeClass('fixed'); //classを削除
27 }
28
29 if (scrollEnd <= distance + windowHeight) { //スクロール距離がendの位置を超えたら
30 $('.start').fadeOut(); //フェードアウト
31 } else{
32 $('.start').fadeIn(); //endより上部に戻ったらフェードイン
33 }
34});
35</script>
36</body>

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

解決できませんでした。

補足

特になし

行動規範の内容に同意します

回答1件

予想ですが、

js
1var scrollStart = $('.start').offset().top; //ページ上部からの距離を取得
2var scrollEnd = $('.end').offset().top; //ページ上部からの距離を取得

これらのコードを実行するのが早すぎるのだと思います。これらが実行されたあとに画像のロードが終わって位置がずれてないでしょうか。
<script> のコード全体を load イベントリスナで実行するとか、すべての <img> にサイズを指定してレイアウトシフトが起きないようにするとかで対処できるかもしれません。

投稿2024/05/16 08:07