ITツール

STUDIO知恵袋:固定ヘッダーをページの途中から表示させる方法

STUDIOにて、ヘッダーをスクロールに追従させるように設定したい。これ自体は難しくなく、左上の「配置」の設定を「固定」にすればOKです。

しかし、固定した要素は常に表示されるのが仕様です。メインビジュアルを全画面に表示したいと思っても、どうしてもそこにヘッダーが被る形になってしまいます。

ヘッダーは、ユーザーがスクロールをして、メインビジュアルを通過してから表示させたい。

そんなときは、重ね順の調整を工夫することで解決します。

つまり、重ね順を メインビジュアル > ヘッダー という状態にして、メインビジュアルの後ろ側にヘッダーを隠してしまうのです。

上記の例だと、メインビジュアルの重ね順を 3 にして、ヘッダーの重ね順を 2 に設定しました。

こうすると「ヘッダーの重ね順が、メインビジュアルの後ろに隠れるが、メインコンテンツよりは上になる」という状態になります。

関連キーワード

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール
-,