2019.06.14

コーディング

jQueryなしで簡単にスクロールにあわせて追従してくるナビゲーション

jQueryなしで簡単にスクロールにあわせて追従してくるナビゲーションのアイキャッチ画像

ユーザーのスクロールに合わせてコンテンツを追従させる仕組みは様々な場面で使用されています。
これまではjQueryやそれ以外のJSなどを使用して実現していたので実現に多少手間がかかっていました。

position:stickyを使用してコンテンツ追従させる

今回紹介するのはこれをCSSのみで実現する方法を紹介します。

See the Pen EBVbVo by 01earth furukawa (@furukawa) on CodePen.

追従させたい要素に「position:sticky;」と追従させる時の位置の指定、親要素に「position:relative;」をいれるだけなので非常に簡単です。
うまく動作しない場合は親要素などに「overflow:hidden;」などが設定されていないかを確認してください。

この設定を行うと追従中は「position:fixed;」と同様の動作をします。

ただし今回紹介する方法はIEやEdgeには対応していませんが、そもそもPCのユーザーが非常に減少していて、こういったあしらいは+αの要素として実装されるもので、たとえ追従しなくてもコンテンツとしては機能するのでIEやEdgeに対応していなくても大きな問題にはならないでしょう。

どうしても対応する必要がある場合はstickyfillなどを使用すると対応することができます。

今回はナビゲーションに実装してみましたが、ブログのSNSのシェアボタンなど活用シーンはたくさんあると思うので活用してみてください。

SHARE

この記事の筆者

Webクリエイター 古川 徹朗

Webクリエイター 古川 徹朗

Webに関する様々な知識を身に付け、理論的な問題解決を常に目指す頭脳派クリエイター。

WEBSITE DESIGN REQUEST

ホームページ制作・リニューアルの
ご相談はお気軽に

TEL 06-6537-9941 平日 9:00〜19:00

〒550-0012 大阪府大阪市西区立売堀2-5−41

ホームページ制作を相談する