特定のセクションのみをスクロールで固定したい

カバーでの背景固定はやってみましたがセクションが固定するわけではありませんでした。

現状はカバーブロックは背景固定にしていないという認識であっていますかね？

カバーブロックの背景固定は、background-attachment fixed で背景画像を固定する仕組みのようなのですが、iOS Safari は background-attachment fixed が効かない仕様になっているみたいです。なのでスマホでも固定したい場合は独自に実装する必要があります。

〜しましたが真中のセクションだけが表示されます。

position: fixed にすると、その要素は「表示されるレイヤーが変わる」ような形になるので、左右を position: fixed にすると真ん中のカバーブロックと同一のレイヤーには何も存在しない = いっぱいに広がる、という感じになります。

一応それっぽく表示されるような CSS を書いてみました。

@media (min-width: 1024px) {
    .coverfix_left {
        position:fixed;
        left: var(--body-margin-left);
    }

    .coverfix_center .wp-block-cover__inner-container {
        max-width: calc(100vw - var(--body-margin-left) - 286px * 2);
        margin-right: auto;
        margin-left: auto;
    }

    .coverfix_right {
        position:fixed;
        right: 0;
    }
}

が、画面幅が1024px〜1200pxくらいのときの真ん中のコンテンツの表示が結構きついので、個人的にはレイアウトを考え直したほうがベターなのかなぁと思いました。

背景固定画像があくまで装飾で、画像のここからここまでをきっちり見せたい、というようなことがないのであれば、下記のような方法にするのも良いのかなと思いました。

– 「Thanks…for coming.〜」という文字列は無し
– カバーブロックを使うのをやめる
– 適当なフックで背景画像用の画像を追加し、position: fixed して位置も調整する（背景画像を表示するのがこのページだけならフックを使わずにエディターで画像ブロックを入れて class を追加して〜でも良いかも）

の286pxの定義についてなぜその数字になるのか、今後の勉強のために教えていただけないでしょうか？

僕が確認したときの左右の幅がだいたい 286px だったので、中央のカラムは画面幅からその大きさを引いた大きさを指定しました。左右の幅がなぜ 286px なのかは追えませんでした…。

スマホ版GoogleCromeで確認した場合も固定がされていませんでした、、
こちらも同じ理由でしょうか？

あ、中央は意識してませんでした、すみません。固定されていない理由は同じだと思います。中央の背景画像も position: fixed で固定するようにすればスマホでも固定されると思います。