MaedaCSSUI/UXwebデザイン当ブログでは、画面をスクロールすると途中でサイドバーを固定/解除する機能を実装しています。この機能をJavaScript(jQuery)で独自に実装していました。sticky」で実装し直すことにしました。いわゆる脱jQueryです。スクロールが絡むJavaScriptの処理は、イベントが頻発するためにブラウザに負荷をかけやすいです。sticky」で実装し直したことで、ブラウザに優しいページになったんじゃないかなと思っています。sticky」でのサイドバー固定機能の実装方法と、polyfill「sticky-state」の使い方を紹介したいと思います。stickyのブラウザ対応状況polyfillとして「sticky-state」を使うまとめはじめに当ブログでは、ページをスクロールすると途中で「サイドバー」が画面に固定されるようになっています。実際にパソコンのブラウザで見てスクロールしてもらえればわかるかと思います。これまで、この機能をJavaScriptで実装していました。ところがこれが原因で、ある時からFirefoxの開発者ツールのコンソールに以下のような警告が出るようになりました。このサイトはスクロールに対して配置を固定する効果が使用されています。これは非同期パンで正しく動作しない可能性があります。参照し、関連するツールと機能の議論に参加してください。いうサイトに以下の記述があります。イベントリスナー内でスクロール位置プロパティを変更しているページスクリプトに対し、ウェブコンソールが警告を表示するようになりました。実装中の非同期スクロール機能と相性が悪い場合があります。ページを参照してください。sticky」が紹介されていました。sticky」を使って、当ブログのサイドバーを固定する機能を実装し直すことにしました。実装は驚くほど簡単でした。以下に実装方法を紹介しますので、ぜひ参考にしてもらえればと思います。sticky」の使い方は実にシンプルです。leftのうち少なくとも1つで閾値を指定)を指定するだけです。スクロール中に固定したい要素にstickyというclass名をつけたとしたら、以下のようにcssを指定します。fixedのように振る舞います)。stickyを指定している要素の親要素の表示範囲内となります。stickyを指定している要素の高さより小さくなったりしたタイミングで、固定状態は解除されます。(この辺りの挙動は実際に実装して試してみてください。)閾値にはleftやrightも指定することができるので、横にスクロールした際に要素を固定することも可能です。stickyの実装例それでは、実際に実装方法について紹介します。HTMLは、以下のように固定/解除する要素と、その親要素を用意します。それぞれsticky、wrapperというclass名をつけます。class名は自由につけてかまいません。それから親要素(.wrapper)は画面にスクロールが発生するように、幅と高さをそれぞぞれ200vw、200vhとしました。*/}上記を実装したものが以下となります。stickyが機能するか確認してみてください。stickyが効かないようです。visibleを指定している時のみ機能するようです(visibleが初期値なので、overflowを指定していない時も機能します)。stickyのブラウザ対応状況は2017年5月現在以下の通りとなっています。use...惜しいところですが、IEとEdgeでは使用できません。stickyはまだそのまま使うことはできません。polyfillと併用する必要があります。stickyのpolyfillの一つである「sticky-state」です。soenkekluth/sticky-stateこのpolyfillは、jQueryを使用せず使えます。それがこのpolyfillをオススメする理由でもあります。「sticky-state」の使い方を以下に紹介します。こちらは多少JavaScriptを書く必要があります。「sticky-state」のインストール開発環境にNode.jsがインストールされている場合は、以下のコマンドでプロジェクトディレクトリ内に「sticky-state」をインストールすることができます。--save直接GitHubのページからダウンロードしても構いません。ZIP」をクリックしてダウンロードしてください。「sticky-state-master.zip」というzipファイルがダウンロードされます。zipファイルを解凍すると、sticky-state-masterというフォルダが作られます。使用するファイルはsticky-state-masterフォルダ内のdistフォルダの中に入っています。stick-state.cssstick-state.jsstick-state.min.jsページへの読み込みwebpackやbrowserifyなどのビルドツールを使用して開発している場合は、以下をjsファイルの一番上に記述してページに読み込みます。require('sticky-state');script要素を使ってページにhtmlファイルに読み込む場合は、以下をhtmlファイルに記述します(ファイルのパスはお使いの環境に合わせてください)。src="./dist/stick-state.min.js"></script>JavaScriptの実装JavaScriptの実装は以下の通りです。詳細はコメントをみてください。callStickyState();}CSSの実装CSSの実装は以下の通りです。こちらは付属のstick-state.cssファイルの内容そのままです。stickyを適用させたい要素のclass名をstickyとした場合です。別のclass名にした場合は、書き換える必要があります。absolute;}polyfillの「sticky-state」の実装はこれで完了です。stickyを使うと、CSSだけでスクロール追従して固定、解除する要素を実装することができます。JavaScriptで実装するよりも簡単で、さらにパフォーマンス的にもよいということなので、ぜひお試ししてもらえればと思います。stickyはIEとEdgeでは対応していませんが、今回紹介したpolyfill「sticky-state」の使用も検討してもらえればと思います。この「sticky-state」はjQueryを使う必要がないという点からしても、自分ではオススメかなと思っています。stickyのように、CSSだけで実装できる機能が増えてきています。当ブログでは、スムーズスクロールもCSSのscroll-behaviorというプロパティを使って実装しています。こちらについても次回以降に紹介していくつもりです。ブラウザでできることが増え、ページの表示時だけでなく、表示後もパフォーマンスを気にする必要が出てきています。CSSでできることも増えてきていますし、状況に応じてCSSやJSを使い分けていく知識が求められてきていますね。以下の書籍はそのような要望に答えてくれる内容となっています。最後に紹介しておきます。maechabinホーム目次トップ。