【CSS・JS】画面の下部に固定しているアイコンをフッターが表示される場合はその分ズラしたい

#事前情報・実現したいこと

現状画像のように、アイコンを画面下部に固定させている

現状のコーディングではスクロールしてフッターが出現すると、下記画像のように被ってしまう。

###実現したいこと
スクロールしてフッターが出現したらした分だけ固定アイコンを上にズラしたい

###コード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <link rel="stylesheet" href="main.css" type="text/css" />
6    <title>タイトル</title>
7  </head>
8  <body>
9    <!--ヘッダー-->
10    <header>
11      <div class="header_content">
12        <div>header1</div>
13        <div>header2</div>
14        <div>header3</div>
15        <div>header4</div>
16        <div>header5</div>
17      </div>
18    </header>
19    <!--ヘッダー-->
20    <div class="main">
21      <p>コンテンツ１</p>
22      <p>コンテンツ２</p>
23      <p>コンテンツ３</p>
24      <p>コンテンツ４</p>
25      <p>コンテンツ５</p>
26      <p>コンテンツ６</p>
27      <p>コンテンツ７</p>
28      <p>コンテンツ８</p>
29      <p>コンテンツ９</p>
30      <p>コンテンツ１０</p>
31      <p>コンテンツ１１</p>
32      <p>コンテンツ１２</p>
33      <p>コンテンツ１３</p>
34      <p>コンテンツ１４</p>
35      <p>コンテンツ１５</p>
36      <p>コンテンツ１６</p>
37      <p>コンテンツ１７</p>
38      <p>コンテンツ１８</p>
39      <p>コンテンツ１９</p>
40      <p>コンテンツ２０</p>
41    </div>
42    <div class="image">
43      <img src="icon.png" alt="画像" title="画像">
44    </div>
45    <!--フッター-->
46    <footer>
47      <div class="footer_content">
48        <div>footer1</div>
49        <div>footer2</div>
50        <div>footer3</div>
51        <div>footer4</div>
52        <div>footer5</div>
53      </div>
54    </footer>
55    <!--フッター-->
56  </body>
57</html>

css
1body {
2    margin: 0;
3    padding: 0;
4    
5    min-height: 100vh;
6    position: relative;
7    padding-bottom: 100px;
8    box-sizing: border-box;
9}
10
11/*header*/
12header {
13  background-color: rgba(0, 0, 0, 0.8);
14  height: 100px;
15  width: 100%;
16  color: white;
17  position: fixed;
18}
19.header_content {
20  padding: 40px;
21  display: flex;
22  justify-content: space-between;
23  width: 500px;
24  margin: 0 auto;
25}
26
27/*main*/
28.main {
29  padding-top: 125px;
30  width: 900px;
31  margin: 0 auto;
32}
33
34/*image*/
35.image {
36  text-align: right;
37  width: 95%;
38  margin: 0 auto;
39  position: fixed;
40  bottom: 0;
41}
42img {
43  width: 150px;
44  height: 150px;
45}
46
47/*footer*/
48footer {
49  background-color: rgba(0, 0, 0, 0.8);
50  color: white;
51  width: 100%;
52  text-align: center;
53  position: absolute;
54  bottom: 0;
55  padding: 38px 0;
56}
57.footer_content {
58  /*padding: 40px;*/
59  display: flex;
60  justify-content: space-between;
61  width: 500px;
62  margin: 0 auto;
63}

CSSで上記内容は実現することはできますでしょうか？
もしくはJSを使用しなければできないものなのでしょうか。
実装方法をご教示頂けますと幸いです。よろしくお願いいたします。

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

回答2件

ベストアンサー

一応下記のコードでスクロールしてフッターが出現したらした分だけ固定アイコンを上にズラしたい
という目的は達成されていますが、処理的な問題でベストプラクティスとは言えないと思いますが、
これでも大丈夫と言えば大丈夫だとは思いますので参考までにどうぞ
下記コードをそのままペーストしたら動きます。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>タイトル</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            position: relative;
12            box-sizing: border-box;
13        }
14
15        /*header*/
16        header {
17            background-color: rgba(0, 0, 0, 0.8);
18            height: 100px;
19            width: 100%;
20            color: white;
21            position: fixed;
22        }
23
24        .header_content {
25            padding: 40px;
26            display: flex;
27            justify-content: space-between;
28            width: 500px;
29            margin: 0 auto;
30        }
31
32        /*main*/
33        .main {
34            padding-top: 125px;
35            width: 900px;
36            margin: 0 auto;
37        }
38
39        /*image*/
40        .image {
41            text-align: right;
42            width: 95%;
43            margin: 0 auto;
44            position: fixed;
45            bottom: 0;
46        }
47
48        img {
49            width: 150px;
50            height: 150px;
51        }
52
53        /*footer*/
54        footer {
55            background-color: rgba(0, 0, 0, 0.8);
56            color: white;
57            width: 100%;
58            text-align: center;
59            padding: 38px 0;
60        }
61
62        .footer_content {
63            /*padding: 40px;*/
64            display: flex;
65            justify-content: space-between;
66            width: 500px;
67            margin: 0 auto;
68        }
69    </style>
70</head>
71
72<body>
73    <!--ヘッダー-->
74    <header>
75        <div class="header_content">
76            <div>header1</div>
77            <div>header2</div>
78            <div>header3</div>
79            <div>header4</div>
80            <div>header5</div>
81        </div>
82    </header>
83    <!--ヘッダー-->
84    <div class="main">
85        <p>コンテンツ１</p>
86        <p>コンテンツ２</p>
87        <p>コンテンツ３</p>
88        <p>コンテンツ４</p>
89        <p>コンテンツ５</p>
90        <p>コンテンツ６</p>
91        <p>コンテンツ７</p>
92        <p>コンテンツ８</p>
93        <p>コンテンツ９</p>
94        <p>コンテンツ１０</p>
95        <p>コンテンツ１１</p>
96        <p>コンテンツ１２</p>
97        <p>コンテンツ１３</p>
98        <p>コンテンツ１４</p>
99        <p>コンテンツ１５</p>
100        <p>コンテンツ１６</p>
101        <p>コンテンツ１７</p>
102        <p>コンテンツ１８</p>
103        <p>コンテンツ１９</p>
104        <p>コンテンツ２０</p>
105    </div>
106    <div class="image">
107        <img src="https://f.easyuploader.app/eu-prd/upload/20200721232218_79766957793333643852.png" alt="画像" title="画像">
108    </div>
109    <!--フッター-->
110    <footer>
111        <div class="footer_content">
112            <div>footer1</div>
113            <div>footer2</div>
114            <div>footer3</div>
115            <div>footer4</div>
116            <div>footer5</div>
117        </div>
118    </footer>
119    <!--フッター-->
120    <script>
121        const windowHeight = window.innerHeight;
122        window.addEventListener("scroll", () => {
123            const distanceY = document.getElementsByTagName("footer")[0].getBoundingClientRect().top;
124            if (windowHeight - distanceY > 0) {
125                document.getElementsByClassName("image")[0].style.bottom = windowHeight - distanceY + "px";
126            }
127        });
128
129        window.addEventListener("resize", () => {
130            window.location.reload(false);
131        });
132    </script>
133</body>
134
135</html>