現役フリーランスエンジニアが運営するテックメディア。日々の業務で得た知識を発信していきます！

今回は、一定量スクロールすると付いてくるサイドバーをCSSで実装する方法を紹介します。

今回実装するもの

一定量スクロールすると付いてくるサイドバー

実装

.side_widget{
top: 0;
position: -webkit-sticky;
position: sticky;
}

position:stickyとは

要素は文書の通常のフローに従って配置され、直近のスクロールする祖先及び包含ブロック (直近のブロックレベル祖先、表関連要素を含む) に対して top, right, bottom, left の値に基づいて相対配置されます。オフセットは他の要素の配置には影響を与えません。
この値は、常に新しい積み重ねコンテキストを作成します。なお粘着要素は、直近の祖先がスクロールしない場合でも、「スクロールの仕組み」を持つ直近の祖先 (overflow が hidden, scroll, auto, overlay として作成されたもの) に「粘着」します。これによって「粘着」のふるまいを効果的に抑止します (Github issue on W3C CSSWG を参照)。

対応ブラウザ2018/06/19日現在

MDN

IEは未対応ですが、position:static;その場合position:static;と同様の動きをするので、そんなに問題ないかなと思ってます！

以下の記事ではこのposition:sticky;を用いて実際にWordPressで止まるようにしています。
今のサイドバーに表示されている目次の作り方の紹介です。

WordPressで目次をサイドバーに固定する方法【JS不要】

長編記事を読む際に、目次がサイドバーに固定されていると、目的の内容に素早くたどり着けるので便利ですよね。有名どころだと、Qiitaさんとかが使っていますが、今回はそのような目次をWordPressで、サイドバーに固定する方法を紹介します。完成系の挙動としては、...

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

WINDII

WINDII（ウィンディ）は、フリーランスエンジニアが運営するテックメディアです。 日々の業務で得た知見を、皆さんに役立つコンテンツにして発信していくので応援よろしくお願いします！ また、Slackで無料コミュニティも運営しています。たくさんのエンジニアが参加していて、プログラミングの相談や雑談などをしている楽しいコミュニティなので、興味ある方はぜひお気軽にご参加ください。 Slackコミュニティはこちらから

最新記事 by WINDII (全て見る)

• Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
• IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
• IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日