スクロールすると文章や写真が固定されて追従するエフェクトの作り方解説！

こんにちは、Autumn（オータム）です。

いろんなサイトを見ていると、たまにサイドバーの要素だけ固定して追従するエフェクトを見ることありませんか？

 

「やってみたい！でもこれってどうやるん？」「Javascriptを駆使しないと実装できないのかな？」

 

 

 

なんて考えてネット検索でここにたどりついた、そこのあなた、おめでとうございます。

そんなあなたのために今回はCSSのみで実装する方法をお伝えします。

カンタンな実例を元に解説していきますし、ソースコードも公開していますので是非参考にしてください。

それでは、始めていきましょう！

文章や写真を固定して追従させる方法

さっそく実例を見ていきます。
下の実例をスクロールすると、右のタイトルと文章が画面の上に残り追従するようになります。

See the Pen
sticky1 by Autumn (@regprvcd-the-animator)
on CodePen.

このエフェクトを作るポイントは、固定する要素に「position: sticky ;」を追加することです。

【ポイントのCSS】

そしてもう一つのポイントが、「top」プロパティを指定すること。
これを忘れるとうまく作動しませんので気を付けてください。

 

「top」の値が大きくなればなるほど、要素を固定する高さが下がります。

「top: 200px;」にしてみると、下記のように画面の上から200px下がった位置に固定しました。

See the Pen
sticky2 by Autumn (@regprvcd-the-animator)
on CodePen.

複数組み合わせてみる

また複数組み合わせると、よりアクティブなレイアウトになります。

See the Pen
sticky3 by Autumn (@regprvcd-the-animator)
on CodePen.

固定する要素を画像にしても面白そうですよね！

ポイント振り返り&まとめ

今回の内容のポイントを振り返りましょう。

 

たった1、2行追加するだけでこんなにレイアウトに動きを加えられますし、コーダーにも負担が少ないので、WEBデザイナーの方も覚えておいて損はないですね。

 

また、今回登場した「position」プロパティの基本的な使い方について知りたい方は別記事にまとめておりますので、よかったら参考にしてください。

 

また、先日twitterも始めました！
勉強のためにWEBサイトを見漁っているのですが、「これは良いなー」と思うサイトを毎日ツイートしております。

世の中にあるホームページを見て研究することで勉強になりますし、スキル向上にもつながります。よかったら覗いてみてください。

 

読んでいただき、ありがとうございました！