position:stickyでスクロール時に要素を被せる方法

実現したいこと

画面をスクロールした際に、position:stickyを使用し、
要素をすべてスクロールした後固定。
次の要素が重なるようにスクロールしたい。

前提

・HTML＋CSS
・VisualStudio

発生している問題・エラーメッセージ

スクロールすると最初の要素の中身が切れてしまい、すべて表示させてから要素を被せることができません。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>テスト</title>
</head>
<style>
.company__contents{
  width: 80%;
}
.company__contents__wrap {
  background-color: #FFF;
  border-radius: 1rem;
  padding: 0 3rem;
}
.company__table {
  width: 95%;
  padding: 0 2rem;
  border-collapse: collapse;
  margin: 0 auto;
}
.company__table tr {
  border-bottom: 2px solid #E2E8F2;
}
.company__table tr:last-child {
  border-bottom: none;
}
.company__table td,th {
  padding: 2.7rem 0 2.7rem 5rem;
}
.company__table th {
  color: #777777;
  font-size: 16px;
  font-weight: 400;
}
.company__table td {
  font-size: 16px;
  letter-spacing: .1rem;
  font-weight: 500;
  line-height: 2.6rem;
  color: #212E32;
}
.block {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: -webkit-sticky;
position: sticky;
top: 0;
}
.block-one {
  background: #212E32;
  color: #fff;
  z-index: 100;
  height: 100%;
}
.block-two {
  background: #83437A;
  z-index: 200;
}
.block-three {
  background: #76937A;
  z-index: 300;
}
.company__contents--sub {
  font-weight: 400;
  font-size: 14px;
}
</style>

<body>
  <!-------------------------
  中身部分
  ------------------------->
  <div class="block block-one">
    <!-- コンテンツ部 -->
    <div class="company__contents">
      <!-- 会社概要部 -->
      <section id="overview">
        <div class="company__contents__wrap">
          <table class="company__table">
            <tbody>
              <!-- 社名 -->
              <tr>
                <th>社名</th>
                <td>株式会社テスト</td>
              </tr>
              <!-- 住所 -->
              <tr>
                <th>住所</th>
                <td>
                  〒000-0000<br>
                  テストテストテスト
                </td>
              </tr>
              <!-- 設立 -->
              <tr>
                <th>設立</th>
                <td>9999年9月</td>
              </tr>
              <!-- 資本金 -->
              <tr>
                <th>資本金</th>
                <td>99,999,999円</td>
              </tr>
              <!-- 事業内容 -->
              <tr>
                <th>事業内容</th>
                <td>
                  <p>テスト</p>
                  <span class="company__contents--sub">
                  ・システム開発、保守<br>
                  ・アプリケーション開発<br>
                  </span>
                </td>
              </tr>
              <!-- 許認可 -->
              <tr>
                <th>許認可</th>
                <td>
                  テスト<br>
                  テスト<br>
                  テスト
                </td>
              </tr>
              <!-- 取引銀行 -->
              <tr>
                <th>取引銀行</th>
                <td>
                  〇〇銀行<br>
                  〇〇銀行<br>
                  〇〇銀行
                </td>
              </tr>
              <!-- テスト１ -->
              <tr>
                <th>テスト１</th>
                <td>
                  テスト１
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </div>
  <div class="block block-two">
    <p>Two</p>
  </div>
  <div class="block block-three">
    <p>Three</p>
  </div>

</body>

試したこと

各要素（.company__contentsや.block-one）にheightをpx指定し高さを出しても途中で切れて次の要素がスクロールで被ってしまいました。

一部参考サイトのコードをお借りしています、よろしくお願いします。

y_uta

2023/11/21 05:22

PC画面だとその対応で行けそうですね、ご教示いただきありがとうございます。レスポンシブ対応も目指していくとなるとJS使って調整必要かと思いますので少し粘ってみます。ご回答くださりありがとうございました。

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

回答1件

ベストアンサー

ちょっと厳しいと思いますが、たとえば高さを決め打ちしてしまうのはどうでしょうか。

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width,initial-scale=1">
8    <title>テスト</title>
9</head>
10<style>
11    .company__contents {
12        width: 80%;
13    }
14
15    .company__contents__wrap {
16        background-color: #FFF;
17        border-radius: 1rem;
18        padding: 0 3rem;
19    }
20
21    .company__table {
22        width: 95%;
23        padding: 0 2rem;
24        border-collapse: collapse;
25        margin: 0 auto;
26        height: 190vh; /* 追加 */
27    }
28
29    .company__table tr {
30        border-bottom: 2px solid #E2E8F2;
31    }
32
33    .company__table tr:last-child {
34        border-bottom: none;
35    }
36
37    .company__table td,
38    th {
39        padding: 2.7rem 0 2.7rem 5rem;
40    }
41
42    .company__table th {
43        color: #777777;
44        font-size: 16px;
45        font-weight: 400;
46    }
47
48    .company__table td {
49        font-size: 16px;
50        letter-spacing: .1rem;
51        font-weight: 500;
52        line-height: 2.6rem;
53        color: #212E32;
54    }
55
56    .block {
57        width: 100%;
58        height: 100vh;
59        display: flex;
60        align-items: center;
61        justify-content: center;
62        position: -webkit-sticky;
63        position: sticky;
64        top: 0;
65    }
66
67    .block-one {
68        background: #212E32;
69        color: #fff;
70        z-index: 100;
71        height: 100%;
72        height: 200vh; /* 追加 */
73        top: -100vh; /* 追加 */
74        align-items: start; /* 追加 */
75    }
76
77    .block-two {
78        background: #83437A;
79        z-index: 200;
80    }
81
82    .block-three {
83        background: #76937A;
84        z-index: 300;
85    }
86
87    .company__contents--sub {
88        font-weight: 400;
89        font-size: 14px;
90    }
91</style>
92
93<body>
94    <!-------------------------
95  中身部分
96  ------------------------->
97    <div class="block block-one">
98        <!-- コンテンツ部 -->
99        <div class="company__contents">
100            <!-- 会社概要部 -->
101            <section id="overview">
102                <div class="company__contents__wrap">
103                    <table class="company__table">
104                        <tbody>
105                            <!-- 社名 -->
106                            <tr>
107                                <th>社名</th>
108                                <td>株式会社テスト</td>
109                            </tr>
110                            <!-- 住所 -->
111                            <tr>
112                                <th>住所</th>
113                                <td>
114                                    〒000-0000<br>
115                                    テストテストテスト
116                                </td>
117                            </tr>
118                            <!-- 設立 -->
119                            <tr>
120                                <th>設立</th>
121                                <td>9999年9月</td>
122                            </tr>
123                            <!-- 資本金 -->
124                            <tr>
125                                <th>資本金</th>
126                                <td>99,999,999円</td>
127                            </tr>
128                            <!-- 事業内容 -->
129                            <tr>
130                                <th>事業内容</th>
131                                <td>
132                                    <p>テスト</p>
133                                    <span class="company__contents--sub">
134                                        ・システム開発、保守<br>
135                                        ・アプリケーション開発<br>
136                                    </span>
137                                </td>
138                            </tr>
139                            <!-- 許認可 -->
140                            <tr>
141                                <th>許認可</th>
142                                <td>
143                                    テスト<br>
144                                    テスト<br>
145                                    テスト
146                                </td>
147                            </tr>
148                            <!-- 取引銀行 -->
149                            <tr>
150                                <th>取引銀行</th>
151                                <td>
152                                    〇〇銀行<br>
153                                    〇〇銀行<br>
154                                    〇〇銀行
155                                </td>
156                            </tr>
157                            <!-- テスト１ -->
158                            <tr>
159                                <th>テスト１</th>
160                                <td>
161                                    テスト１
162                                </td>
163                            </tr>
164                        </tbody>
165                    </table>
166                </div>
167            </section>
168        </div>
169    </div>
170    <div class="block block-two">
171        <p>Two</p>
172    </div>
173    <div class="block block-three">
174        <p>Three</p>
175    </div>
176
177</body>