STUDIOにて、ヘッダーをスクロールに追従させるように設定したい。これ自体は難しくなく、左上の「配置」の設定を「固定」にすればOKです。
しかし、固定した要素は常に表示されるのが仕様です。メインビジュアルを全画面に表示したいと思っても、どうしてもそこにヘッダーが被る形になってしまいます。
ヘッダーは、ユーザーがスクロールをして、メインビジュアルを通過してから表示させたい。
そんなときは、重ね順の調整を工夫することで解決します。
つまり、重ね順を メインビジュアル
> ヘッダー
という状態にして、メインビジュアルの後ろ側にヘッダーを隠してしまうのです。
上記の例だと、メインビジュアルの重ね順を 3
にして、ヘッダーの重ね順を 2
に設定しました。
こうすると「ヘッダーの重ね順が、メインビジュアルの後ろに隠れるが、メインコンテンツよりは上になる」という状態になります。