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のシェアボタンなど活用シーンはたくさんあると思うので活用してみてください。