背景を固定にしたまま指定された要素をスクロールさせたいです。

前提・実現したいこと

下記のように、背景を固定にしたまま、文章のスクロールが終わったら、次のセクションへスクロールできるようにしたいです。

overflow: hidden と positon: sticky を両立するといったことはできない
ということを知ったので、
position: sticky;
と、
clip-pathで四角く切り取れば、
上記のようなかたちになるかと思ったのですが、うまくいっておりません。

試したこと

↓こちらのコードは、参考にさせて頂いているコードを抜粋して、試しに今作っているものです。

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <link rel="stylesheet" type="text/css" href="style.css">
7
8    <title>Document</title>
9</head>
10<body>
11    <div class="body">
12    <div class="content">
13        <div class="wrapper">
14            <div class="sticky"></div>
15                <div class="moji">
16                    <p>moji</p>
17                    <p>moji</p>
18                    <p>moji</p>
19                    <p>moji</p>
20                    <p>moji</p>
21                    <p>moji</p>
22                    <p>moji</p>
23                    <p>moji</p>
24                    <p>moji</p>
25                    <p>moji</p>
26                    <p>moji</p>
27                    <p>moji</p>
28                    <p>moji</p>
29                    <p>moji</p>
30                    <p>moji</p>
31                    <p>moji</p>
32                    <p>moji</p>
33                    <p>moji</p>
34                    <p>moji</p>
35                    <p>moji</p>
36                    <p>moji</p>
37                    <p>moji</p>
38                    <p>moji</p>
39                    <p>moji</p>
40                    <p>moji</p>
41                    <p>moji</p>
42                    <p>moji</p>
43                    <p>moji</p>
44                    <p>moji</p>
45                    <p>moji</p>
46                    <p>moji</p>
47                    <p>moji</p>
48                    <p>moji</p>
49                    <p>moji</p>
50                    <p>moji</p>
51                    <p>moji</p>
52                    <p>moji</p>
53                    <p>moji</p>
54                    <p>moji</p>
55                    <p>moji</p>
56                    <p>moji</p>
57                    <p>moji</p>
58                    <p>moji</p>
59                    <p>moji</p>
60                    <p>moji</p>
61                    <p>moji</p>
62                    <p>moji</p>
63                    <p>moji</p>
64                    <p>moji</p>
65                    <p>moji</p>
66                    <p>moji</p>
67                    <p>moji</p>
68                    <p>moji</p>
69                    <p>moji</p>
70                    <p>moji</p>
71                    <p>moji</p>
72                    <p>moji</p>
73                    <p>moji</p>
74                    <p>moji</p>
75                    <p>moji</p>
76                    <p>moji</p>
77                    <p>moji</p>
78                    <p>moji</p>
79                    <p>moji</p>
80                    <p>moji</p>
81                    <p>moji</p>
82                    <p>moji</p>
83                    <p>moji</p>
84                    <p>moji</p>
85                    <p>moji</p>
86                    <p>moji</p>
87                    <p>moji</p>
88                    <p>moji</p>
89                    <p>moji</p>
90                    <p>moji</p>
91                    <p>moji</p>
92                    <p>moji</p>
93                    <p>moji</p>
94                    <p>moji</p>
95                    <p>moji</p>
96                    <p>moji</p>
97                    <p>moji</p>
98                    <p>moji</p>
99                    <p>moji</p>
100                </div>
101        </div>
102    </div>
103    </div>
104
105    <div class="tugi"><p>次の要素</p></div>
106</body>
107</html>

CSS
1.body {
2    height: 400vh;
3  }
4
5  .content{
6    position: relative;
7  }
8
9  .moji{
10      position: absolute;
11      top: 0;
12      left: 0;
13  }
14
15  .wrapper {
16    background-color: #ccc;
17    height: 100vh;
18    width: 100vw;
19    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
20  }
21
22  .sticky {
23    background-color: #009688;
24    width: 100vw;
25    height: 80vh;
26    position: -webkit-sticky;
27    position: sticky;
28    top: 0;
29    right: 0;
30  }
31
32  .tugi{
33      background-color: #ff9;
34      height: 100px;
35  }

お聞きしたいこと

上記のような考え方で合っている場合、clip-pathで切り取るところまでは、合っていますでしょうか。
そもそも、CSSでの実装は難しいでしょうか。
このような、プラグインを用いたほうが、現実的でしょうか。(プラグイン例）

お忙しいところ恐縮ですが、何かヒントを頂けましたら幸いです。
宜しくお願いいたします。

解決した方法

ご回答頂いた、「background-attachment: fixed;」を用いて、
さらに「position: sticky;」を当てたところ、自分の理想通りになりました！！！！
ありがとうございます！！！こちら実際のコードです。

HTML
1 <section class="introduction"> ←ここの背景をbackground-attachment: fixed;
2            <div class="introduction-content">
3                <div class="title"> ←ここに上下のpaddingで可視範囲を設定
4                    <h1>COMMITMENT</h1>
5                    <p class="subtitle">3 special points</p>
6                </div>
7
8                <div class="introduction-writing"> ←ここがstiky、高さも指定
9                    <h2>お客様に喜んで頂ける家具を<br>
10                    お届けするために。</h2>
11
12                    <p>ご購入頂きご自宅に届いたその瞬間から、家具とお客様の生活が始まります。<br>
13                    お客様との大切な時間を共に過ごす物だからこそ、輸入から、お客様のご自宅にお届けし、家具がお客様のご自宅の一部になり、快適に使って頂けるまでが、私達の仕事です。</p>
14                </div>
15                <span class="scroll">SCROLL</span>
16            </div>
17        </section>

CSS
1.introduction {
2  background-image: url(../img/back_commitment.jpg);
3  background-size: contain;
4  background-repeat: no-repeat;
5  background-attachment: fixed;
6}
7
8.introduction-content {
9  width: 50%;
10}
11
12.introduction-content .title {
13  padding: 30% 0;
14}
15
16.introduction-writing {
17  padding: 0 10%;
18  height: 150vh;
19  position: -webkit-sticky;
20  position: sticky;
21  top: 0;
22  left: 0;
23}
24
25.introduction h1 {
26  font-size: 7.42188vw;
27  font-family: "din-1451-lt-pro-engschrift", sans-serif;
28  font-style: normal;
29  font-weight: 400;
30  color: #eae2db;
31  line-height: 1.75em;
32  text-align: center;
33}
34
35.introduction .subtitle {
36  font-size: 30px;
37  font-family: "din-1451-lt-pro-engschrift", sans-serif;
38  font-style: normal;
39  font-weight: 400;
40  color: #eae2db;
41  line-height: 1.75em;
42  text-align: center;
43  margin-top: -7%;
44}
45
46.introduction h2 {
47  font-size: 26px;
48  font-family: "ryo-gothic-plusn", sans-serif;
49  font-style: normal;
50  font-weight: 700;
51  color: #eae2db;
52  line-height: 1.75em;
53}
54
55.introduction .scroll {
56  font-size: 20px;
57  font-family: "din-1451-lt-pro-engschrift", sans-serif;
58  font-style: normal;
59  font-weight: 400;
60  color: #eae2db;
61  line-height: 1.75em;
62}

本当にありがとうございます！！！！！！！！！

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

回答2件

ベストアンサー

background-attachment: fixed;を使ったどうでしょう。

background-attachment - CSS: カスケーディングスタイルシート | MDN

CodePenサンプル

投稿2021/01/15 09:10

hatena19

総合スコア34073

nomura02

2021/01/15 09:52

background-attachment: fixed; と、 position: sticky;で、無事自分の叶えたい通りにすることが出来ました！！！！！！本当に感謝です！！！！プラグインを入れるところでした！！！ありがとうございます！！！実際のコードを追記させていただきました(形になってはいますが自己流ですので正解なのか一抹の不安は残るところです)

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

ちなみになのですが、
これをやって知りましたが、background-attachment: fixed;とbackground-size: cover;を同時に指定しているとIOSつまりスマホで動かなくなってしまう、とのことで
background-attachment: fixedがスマートフォンだけ効かない原因

スマホのときは、

Sass
1(親要素)&::before{
2        content:"";
3        display:block;
4        position:fixed;
5        top:0;
6        left:0;
7        z-index:-3;
8        width:100%;
9        height:100vh;
10        background-repeat:no-repeat;
11        background-position:100% 100%;
12        background-image:url(../img/footer.jpg);
13        background-size: cover;
14    }