ある要素をスクロールと同じ動きで追従させて、終点で固定させたい場合ってありますよね。

そんなときは「position: sticky」が便利です。

動き方の説明は文章だと説明が難しいのですが、動画だと以下のような感じです。
画面左側のテキストが追従し、終点になると通常と同じ動きになります。

%3Cvideo%20autoplay%3D%22%22%20muted%3D%22%22%20playsinline%3D%22%22%20loop%3D%22%22%3E%0A%20%20%3Csource%20src%3D%22https%3A%2F%2Ffile.galera.co.jp%2Fvideo%2F2310081656.mp4%22%20type%3D%22video%2Fmp4%22%3E%0A%3C%2Fvideo%3E

上の動画では、見出しのテキストを追従させる仕組みですが、もちろんバナー画像などを追従させることも可能です。

ちなみにstickyは、英語で「粘着性のある」という意味になります。

STUDIOで「position: sticky」を使用する方法

CSSを追加するには「カスタムコード」で設定する必要があるので、STUDIOの『有料プラン』を利用していることが大前提になります。
（無料プランだとカスタムコードが使えないので）

カスタムコードの記述

記述する内容は以下のような感じです。

STUDIOで「position: sticky」を効かせるには、 .StudioCanvas 直下の .sd に「overflow: visible」が必要になります。

<style>
.StudioCanvas > .sd {
overflow: visible !important;
}
#sticky {
position: sticky;
top: 0;
}
</style>

そして、「position: sticky」を指定する箇所にidを付与しておいて、そのidに「position: sticky;」と「top: 0;」を設定すればOKです。

スマホやタブレットの表示も要確認

例えば、PCでは横2列・スマホでは1列に表示させるようなレイアウトにしている場合、正常に表示されているか必ずスマホでも確認するようにしましょう。

「position: sticky」を設定した箇所がスマホやタブレットだと表示崩れを起こしている可能性があります。

もし表示がおかしくなっている場合は、
例えば、

@media screen and (max-width: 840px) {
#sticky {
position: static;
}
}

のようにページ幅に応じて「position: sticky」が解除されるようにしておけば大丈夫です。

STUDIOで「position: sticky」が効かない原因

「STUDIOでは position: sticky が効かないのかな」と思われている方もいらっしゃるかもしれません。

STUDIOに限らず、通常「position: sticky」が効かない原因は主に以下の3つになります。

topやleftなどの位置の指定がない
親要素に十分な高さがない
親要素（祖先要素）に「overflow: hidden」がある

① topやleftなどの位置の指定がない

「position: sticky」を使用する場合、topやleftなどの指定が必ず必要です。

特に指定することがない場合は、「position: sticky」と一緒に「top: 0;」と記述しておけばOKです。

ちなみに、ヘッダーを絶対位置にしている場合（STUDIOのデザインエディタで、配置：固定を選択している場合）は、ヘッダーの高さ分ほど要素が隠れてしまうと思います。

ヘッダーで隠れないようにするには、「position: sticky」を指定している要素にマイナスのマージンを指定して同じピクセル分のパディングを指定する方法（例えば、margin-top: -100px; padding-top: 100px;）もありますが、「top: 100px;」のようにヘッダーの高さを考慮した数値を入れてもOKです。

② 親要素に十分な高さがない

「position: sticky」を指定した要素は親要素のエリアの中だけで移動することができます。

親要素に移動できる広さ（高さ）がないと、最初から終点に来ていることと同じになるので、「position: sticky」が効いていないように感じてしまいます。

要素が移動できるように、親要素に高さを持たせましょう。

③ 親要素・祖先要素に「overflow: hidden」がある

STUDIOで「position: sticky」が効かない原因もこれです。

親要素や祖先要素に「overflow: hidden」が指定されていると、「position: sticky」は効かなくなります。

ちなみに、STUDIOのデザインエディタの場合は『はみ出し：非表示』を指定していると「overflow: hidden」と同じ意味になります。

ただ、STUDIOだと親要素や祖先要素に「overflow: hidden」を使用していなくても「position: sticky」が上手く動きません。

その理由は、デザインエディタでは操作できない箇所に「overflow: hidden」が指定してあるからです。

その場所というのが、この記事の最初でご紹介した以下の箇所になります。

.StudioCanvas > .sd {

この.StudioCanvas 直下の .sd にもともと「overflow: hidden」が指定してあるので、「overflow: hidden」を無効化する必要があります。

なのでカスタムコードを使用して、同じ箇所に「overflow: visible !important;」を指定すればOKです。

これで祖先要素の「overflow: hidden」がなくなるので、「position: sticky」が効くようになると思います。

【注意】サイトのチェックを忘れずに

今回ご紹介した方法だと .StudioCanvas 直下の .sd の「overflow: hidden」を無効化するかたちになります。

その変更によってサイトに影響が出ていないか必ずチェックするようにしましょう。

【補足】contain: paint

ちなみに僕自身は検証できてないのですが、もしどうしても「overflow: hidden」を無効化しつつ、「overflow: hidden」が効いているかたちにしたい場合は「contain: paint」を追加してみてもいいかもしれません。

ただ、新たに別の不具合を招く可能性があるので、サイト内を全てチェックできない場合は気を付けた方がよさそうです。

まとめ

STUDIOは「position: fixed」なら標準機能でできるんですが、「position: sticky」だと少し工夫が必要です。

今回ご紹介した方法が参考になれば幸いです。

ホームページの制作会社を探されている方は、当社へお気軽にお問い合わせください。

当社はSTUDIOだけでなくWordPressの実績やノウハウも豊富ですので、WordPressと比較した場合のSTUDIOのメリットやデメリットなどもご案内可能です。

→ ホームページ制作のプランや料金はこちら