要素を全画面で固定しスクロールするようにしたい。

前提・実現したいこと

セクション要素を全画面で表示固定し、スクロールするようにしたいです。
少し説明しづらいですが、以下のサイトの見積もり部分のようなイメージです。
https://yuuki-films.com/price/

画面内スクロール部分全体を一旦止めて、画面内スクロールが終わり次第、フッターへスクロールできるような状態にしたいです。

以下が、現状のデモサイトになります。黄色のセクション部分が全画面表示でぴったり止まり、右側の画面内スクロールが終了次第、下へスクロールできるような状態が理想です。
なお、その際、左側の「The feature」部分にカーソルを合わせた際も、右側部分がスクロールされるようになるのが理想です。
https://htsubasa.github.io/test/

少し、説明するのがややこしいですが、上記参考サイトとデモサイトご確認の上
アドバイスいただけると嬉しいです。
よろしくお願い申し上げます。

試したこと

position stickyを使ったがうまくいかなかった...????

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

回答2件

ベストアンサー

サンプル作成してみましたので、ご参考に。

html
1<body>
2  <section class="top">
3    <p>下へスクロール</p>
4  </section>
5
6  <section class="strength-section">
7    <div class="left-block">
8      <h2 class="strength_title">The Feature</h2>
9      <p class="strength-sub">グループの強み</p>
10    </div><!--left-block-->
11    <div class="right-block">
12      <h2>脳で働き、飲食業界の1番になる。</h2>
13      <p>未経験で現場に入り素人なりの飲食業の楽しさ・厳しさ・やりがいを身に染みて体験してきました。その中でも飲食業での勤務常識に凄く驚きと不満を感じておりました。これは違う分野から飲食業に参入し客観的に観れたからこそ気づいたのでしょう。</p>
14      <img class="first_img" src="https://placehold.jp/400x400.png" alt="図">
15      <p>一般的な飲食業の就業状況は、長時間労働・安月給・福利厚生がない・会社のビジョンが見えない、そしてスタッフが失望して辞めて行き、慢性的な人手不足になり厳しい就業体系での労働になるのでしょう。<br>
16        この飲食業の悪い常識の流れに乗って今後商売を続けて行けば、確実に将来、弊社で頑張って働いてくれているスタッフに幸せは訪れないと感じ、弊社では10年前から毎年全力で就業改善を繰り返した結果、 今では他社には真似出来ない充実した労働環境と福利厚生を作り上げれました。</p>
17      <p>でもなぜ「弊社だけ労働環境と福利厚生が良く出来るのか？」と言いますとそれは飲食店だけど身体ではなく頭を使って利益を出し続けているからです。</p>
18      <p>僕は飲食業とは、体で稼ぐのではなく脳で稼ぐ仕事だと考えています。<br>
19        「飲食業は体で稼ぐ」とのイメージですが、身体で稼ぐ＝長時間労働は、いくら頑張っても2倍しか働けませんが脳で稼ぐ＝考えて行動する事ならば、今までの10倍や20倍考えることが自分の気持ちひとつで容易に出来ます。</p>
20      <img class="second_img" src="https://placehold.jp/400x400.png" alt="">
21      <p>では、何を考えて行動すれば良いかと言いますと<br>
22        お客様への料理・接客・人間関係・作業の無駄を省き、集中して自分の目標を作り、ライバルより圧倒的に考え行動する事により、密度の高い時間で働き、身体を使った長時間労働の考えを止め、しっかりとした利益を出す行動をするのです。</p>
23    </div>
24  </section>
25
26  <section class="bottom">
27    <p>フッター</p>
28  </section>
29</body>

css
1* {
2  padding: 0;
3  margin: 0;
4}
5html body .top {
6  height:150vh;
7}
8html body .strength-section {
9  background-color: #EDC144;
10  padding-top: 100px;
11  padding-bottom: 100px;
12  margin: 0 auto;
13  display: flex;
14  justify-content: center;
15}
16html body .strength-section .left-block {
17  margin-right: 5.7vw;
18  position: sticky;
19  top: 100px;
20  height: 100vh;
21}
22.strength-section .left-block .strength_title {
23  font-size: 5.2em;
24  font-weight: 600;
25}
26.strength-section .right-block {
27  width: 40%;
28}
29.bottom {
30  height: 1000px;
31}