当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。もともとこの機能をJavaScript(jQuery)で独自に実装していました。今回のこのサイドバー固定/解除機能をCSSの「position: sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。今回CSSの「position: sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。今回はこの「position: sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。 はじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています
![scrollに応じて要素を固定/解除するCSS「position: sticky」とpolyfill「sticky-state」の紹介(脱jQuery)](https://cdn-ak-scissors.b.st-hatena.com/image/square/fd9422fb4724e5efbd756f5bd475a8f542295ed7/height=288;version=1;width=512/https%3A%2F%2Fmae.chab.in%2Fwp-content%2Fuploads%2F2017%2F04%2Fposition-sticky-1024x661.png)