【JS】スマホ（iPhone）画面上でフッターが出現したら、下部に固定しているアイコンをその分上にズラしたい

#実現したいこと
スクロールしてフッターが出現したら、下部に固定しているアイコンを出現した分上にズラす処理を行いたいです。
現状PC使用時は問題なく動作するのですが、スマートフォンを使用するとアイコンがフッターに隠れてしまいます。
※最下部までしっかりスクロールするとJSが実行されアイコンがズレるが、通常の使用感でのスクロールではJSは実行されない。ツールバーの関係なのか。。？

##コード

erb
1
2<!DOCTYPE html>
3<html>
4  <head>
5    <meta charset="utf-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
7    <%= csrf_meta_tags %>
8    <%= csp_meta_tag %>
9
10    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
11    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
12
13    
14    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
15    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
16    <script defer src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>
17  </head>
18
19  <body>
20    <div class="wrapper">
21      <div class="mobile"><%= render 'layouts/header' %></div>
22      <div class="pc"><%= render 'layouts/pc_header' %></div>
23      <div class="main_body"><%= yield %></div>
24      <div class="chat_icon">
25        <%= image_tag "icon_chat.png", alt: "チャット", class: "" %>
26      </div>
27      <footer style="height:100px; width:100%;"></footer>
28    </div>
29    <script>
30    　// デバイス画面の高さ
31    　var windowHeight = window.innerHeight;
32    　// チャットアイコンの位置調整
33    　// スクロールしてフッターが出現したらその高さ分チャットアイコンの位置をズラす
34    　
35      　window.addEventListener("scroll", () => {
36        　  // フッターの座標を取得
37          　var distanceY = document.getElementsByTagName("footer")[0].getBoundingClientRect().top;
38          　var icon = document.getElementsByClassName("chat_icon")[0].getBoundingClientRect().bottom;
39
40          　if (icon - distanceY > 0 ) {
41              　console.log('hoge')
42              　document.getElementsByClassName("chat_icon")[0].style.bottom = windowHeight - distanceY + 25 + "px";
43          }
44          　// if (windowHeight - distanceY >= 0) {
45          　//     document.getElementsByClassName("chat_icon")[0].style.bottom = windowHeight - distanceY + 25 + "px";
46          　// };
47      　});
48
49
50      　// ページ移行時ページ高さがデバイス画面の高さより低い場合
51      　// チャットアイコンの位置をフッターの分上げる
52      　function checkFooter() {
53        　  //getElementsByTagNameは配列で取得するため[0]が必要
54          　//getBoundingClientRect().topでfooter要素topの座標を取得しdistanceYに代入
55          　var distanceY = document.getElementsByTagName("footer")[0].getBoundingClientRect().top;
56          　//ページ遷移時に、footerが画面に入り込めば実行
57          　//1pxでもfooterのtopが表示されていれば
58          　if (windowHeight - distanceY > 0) {
59           　   document.getElementsByClassName("chat_icon")[0].style.bottom = windowHeight - distanceY + 25 + "px";
60              　console.log('実行')
61          　};
62      　};
63     　 checkFooter();
64
65　　　</script>
66  </body>
67</html>
68

sass
1@media (max-width: 567px) {
2 //chat icon
3  .chat_icon {
4    width: 50px;
5    position: fixed;
6    right: 10px;
7    bottom: 10px;
8
9    img {
10      width: 50px;
11      height: 50px;
12    }
13  }
14}
15
16@media (min-width: 567px) {
17  //chat icon
18  .chat_icon {
19    width: 125px;
20    margin: 0 auto;
21    position: fixed;
22    right: 0;
23    bottom: 25px;
24    text-align: left;
25
26    img {
27      width: 75px;
28      height: 75px;
29    }
30  }
31}

###行ったこと
１．デバイスの画面高さ・フッター頂点の座標を取得し、フッターが画面に出現すると関数を実行

js
1var windowHeight = window.innerHeight;
2window.addEventListener("scroll", () => {
3          // フッターの座標を取得
4          var distanceY = document.getElementsByTagName("footer")[0].getBoundingClientRect().top;
5          
6          if (windowHeight - distanceY >= 0) {
7               document.getElementsByClassName("chat_icon")[0].style.bottom = windowHeight - distanceY + 25 + "px";
8          };
9});

２．アイコン・フッター頂点の座標を取得し、フッターが画面に出現すると関数を実行

js
1window.addEventListener("scroll", () => {
2          // フッターの座標を取得
3          var distanceY = document.getElementsByTagName("footer")[0].getBoundingClientRect().top;
4          var icon = document.getElementsByClassName("chat_icon")[0].getBoundingClientRect().bottom;
5
6          if (icon - distanceY > 0 ) {
7              document.getElementsByClassName("chat_icon")[0].style.bottom = windowHeight - distanceY + 25 + "px";
8          }
9          
10});
11