パララックスの画像を右サイドで固定したい

実現したいこと

前回の質問（https://teratail.com/questions/333907）の続きになります。

CSS gridでコンテナを左右に分けたサイトを作っています。
その右サイドで固定したbackground画像を画面中央ではなく右サイド中央で固定したいというのが前回の質問でした。

最終的にはこちらのサイト（https://www.casleyconsulting.co.jp/blog/engineer/283/）の「サンプル３」のように画像とテキストを連続で表示したく、そこでまた躓いてしまいました。

右サイド中央で固定した状態で上記サイト「サンプル３」のようにパララックスにするにはどうすれば良いでしょうか。

また、現状で下記画像の赤枠の範囲でスクロールしようとするとh2に引っかかってしまいスクロールできません。
こちらも見ていただけると助かります。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="utf-8">
5  <title>@@@@@</title>
6  <meta name="description" content="@@@@@@@@@">
7  <meta name="viewport" content="width=device-width, initial-scale=1">
8  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9  <link href="https://fonts.googleapis.com/css2?family=Philosopher&display=swap" rel="stylesheet">
10  <link rel="stylesheet" href="css/sub.css">
11  <link rel="icon" type="image/png" href="images/favicon.png">
12</head>
13<body>
14  <div class="container">
15    <div class="guide">
16      <div class="id-wrapper">
17        <div class="face">
18          <a href="index.html"><img src="https://placehold.jp/1000x1000.png" alt="face photo"></a>
19        </div>
20        <h1 class="name"><a href="index.html"><ruby>@@@@<rt>@@@@@@@@</rt></ruby> <ruby>@@@@<rt>@@@@@</rt></ruby></a></h1>
21      </div>
22      <nav class="global-nav">
23        <ul class="nav-menu">
24          <li><a href="profile.html">profile</a></li>
25          <li><a href="works.html">works</a></li>
26          <li><a href="contact.html">contact</a></li>
27        </ul>
28      </nav>
29    </div>
30    <div class="container-right">
31      <div class="profile">
32        <div class="parallax">
33          <h2>Profile</h2>
34        </div>
35        <div class="contents">This is Example.</div>
36        <div class="parallax"></div>
37      </div>
38    </div>
39    <footer>
40      <p>&copy; @@@@@@@@@@@@@ 2021</p>
41    </footer>
42  </div>
43</body>
44</html>

css
1@charset "UTF-8";
2/* intersection
3--------------------------------------------------------- */
4html {
5  font-size: 100%;
6}
7body {
8  font-family: "Helvetica Neue", Helvetica, Arial, "YuGothic", "Yu Gothic", "游ゴシック体", "游ゴシック", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "MS ゴシック", "MS Gothic", sans-serif;
9  background-color: #024058;
10  color: #fff;
11  line-height: 1.7;
12  font-size: 16px;
13}
14a {
15  color: #fff;
16  text-decoration: none;
17}
18img {
19  max-width: 100%;
20}
21ul {
22  list-style: none;
23}
24* {
25  box-sizing: border-box;
26}
27/* container
28--------------------------------------------------------- */
29.container {
30  display: grid;
31  grid-template-columns: 8fr 26fr;
32  animation: fadeIn 3s ease 0s 1 normal;
33}
34@keyframes fadeIn {
35  from {
36    opacity: 0;
37  }
38  to {
39    opacity: 1;
40  }
41}
42.container-right {
43  position: absolute;
44  top: 0;
45  left: calc(8 / 34 * 100vw);
46  background-color: #f6f6f6;
47  width: calc(26 / 34 * 100vw);
48  height: 100%;
49  color: #024058;
50}
51/* guide
52--------------------------------------------------------- */
53.guide {
54  display: grid;
55  grid-template-rows: 13fr 8fr;
56  place-items: center;
57  position: fixed;
58  top:0;
59  left: 0;
60  width: calc(8 / 34 * 100vw);
61  height: 100vh;
62}
63.face {
64  margin: 0 auto;
65  min-width: calc(8 / 34 * 600px);
66  max-width: 224px;
67}
68.face img {
69  border-radius: 50%;
70}
71.name {
72  font-family: serif;
73  letter-spacing: 0.1em;
74  text-align: center;
75  ruby-position: under;
76}
77.name rt {
78  font-size: 8px;
79  letter-spacing: 1em;
80  opacity: 0.5;
81}
82.global-nav {
83  position: relative;
84  display: flex;
85  justify-content: center;
86  height: 100%;
87}
88.global-nav .nav-menu {
89  position: absolute;
90  top: 0;
91}
92.nav-menu a {
93  font-family: serif;
94  font-size: 24px;
95  position: relative;
96}
97.nav-menu a:hover {
98  opacity: 1;
99}
100.nav-menu a::after {
101  content: "";
102  position: absolute;
103  bottom: -4px;
104  left: 0;
105  width: 100%;
106  height: 2px;
107  background-color: #fff;
108  transform: scale(0, 1);
109  transform-origin: center top;
110  transition: transform 250ms;
111}
112.nav-menu a:hover::after {
113  transform: scale(1, 1);
114}
115
116/* profile
117--------------------------------------------------------- */
118.profile {
119  height: 100%;
120  background-image: url(https://placehold.jp/2048x1364.png);
121  background-attachment: scroll;
122  background-position: center;
123  background-size: cover;
124  background-repeat: no-repeat;
125  overflow-y: scroll;
126}
127.parallax {
128  height: 100%;
129}
130.parallax h2 {
131    color:#fff;
132    font-family: Quicksand;
133    font-size: 80px;
134    text-shadow: 0px 0px 10px #c0c0c0;
135    text-align: center;
136    position: fixed;
137    width: calc(26 / 34 * 100vw);
138    top: 20%;
139}
140.contents {
141    position: relative;
142    z-index: 1;
143    height:500px;
144    font-size:60px;
145    background: #f89174;
146    padding: 100px 20px;
147    text-align :center;
148    }
149/* footer
150--------------------------------------------------------- */
151footer {
152  position: fixed;
153  bottom: 1vh;
154  left: 1vw;
155}
156footer p {
157  font-family: serif;
158  font-size: 12px;
159  opacity: 0.7;
160}

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

回答3件

何をしたいのか把握できてませんが、
背景画像は固定したまま、h2要素(Profileというテキスト)はスクロールさせたいということでしょうか。

CSSコード全体をみて思ったことは、
gridで列幅を指定しているのに、
position: absolute;やらposition: fixed;で子要素を通常フローから外している、
という矛盾した設定をしているということですね。

absoluteやfixedを指定しているので、gridの指定が無効になり、そのため位置やサイズをいちいち設定するはめになってます。

absoluteやfixedの設定を外せばCSSはシンプルになります。

追記

サンプル作成している間に自己解決したのですね。
自己解決のコードをみてやっとやりたいことが理解できました。

複数の背景画像を固定したまま、スクロールで切り替えたいということですね。

質問のコードには背景画像が一つしかなかったので、そこまで推測できませんでした。

サンプルを書き直しました。ご参考になれば。

absoluteやfixedをやめて、gridレイアウトを活かしたコード例

投稿2021/04/19 02:15

総合スコア33715

2021/04/19 02:40

すみませんありがとうございます！おっしゃる通り、CSSが複雑だなと感じていて、頭を悩ませていました。サンプル見せていただきます！

yanju

2021/04/19 03:05

hatena19さん確認させていただきました。こんなにシンプルになるだなんて...右サイドだけ独立してスクロールさせたく左サイドにfixedを当てていたのですが、こういうときはoverflow-y: scroll;を使うんですね。すべてモヤモヤを解いていただいた感じです...笑とても勉強になりました。また機会があればよろしくお願いします！

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

自己解決

background-position: calc(50% + calc(4 / 34 * 100vw)) 50%;として無理矢理ずらす形でなんとか思うようにいきました！考えていただいた方はありがとうございました。

html
1      <div class="profile">
2        <div class="parallax img-01">
3          <h2>Profile</h2>
4        </div>
5        <div class="parallax img-02"></div>
6        <div class="parallax img-03"></div>
7        <div class="parallax img-04"></div>
8        <div class="parallax img-05"></div>
9      </div>

css
1.profile {
2  height: 100%;
3}
4.parallax {
5  height: 110%;
6  background-attachment: fixed;
7  background-position: calc(50% + calc(4 / 34 * 100vw)) 50%;
8  background-size: cover;
9  background-repeat: no-repeat;
10}
11.img-01 {
12  background-image: url(https://source.unsplash.com/user/erondu/1500x1000);
13}
14.img-02 {
15  background-image: url(https://source.unsplash.com/user/erondu/1400x1000);
16}
17.img-03 {
18  background-image: url(https://source.unsplash.com/user/erondu/1300x1000);
19}
20.img-04 {
21  background-image: url(https://source.unsplash.com/user/erondu/1200x1000);
22}
23.img-05 {
24  background-image: url(https://source.unsplash.com/user/erondu/1100x1000);
25}