こんにちは、中村です。
少し前の話になりますが、Edgeがchromiumベースに更新されましたね。
以前のEdgeで固定表示した要素がスクロールした時にがたつく現象がありました。
javascriptを使ってブラウザのスムーススクロール機能をオフにし、
スクロールの動作を当て直す方法で解決してきた問題ですが
chromiumベースに更新されてから確認したところ、このがたつき問題が解消されていました。
デモ
See the Pen position:stickyを使った時のEdgeのちらつきについて by Nakamura (@takayo-nakamura) on CodePen.
position:stickyを使ったサイドナビゲーションのあるページです。
スクロールした時にメニューが固定され、追従する動きになります。
以前のEdgeではスクロールした時に青い背景の見出し部分が一瞬消えてチカチカと点滅するような状態でした。
弊社の検証機はMicrosoft Surfaceを使用しておりますが、
この機種で見るとjavascriptでスクロールの調整を行ってもまだ不具合が残ってしまうので
こうしたメニューを実装する時はsticky-sidebarを使うことが多かったです。
https://abouolia.github.io/sticky-sidebar/
position:stickyが登場した今、
この動作のためにjsを追加するのは気がすすみませんでした。
Edgeさえなんとかなれば・・Edgeさえ・・・。
そんな中でのchromiumベースへの更新はとてもうれしかったです。 喜びのあまり記事にしてしまいました。
position:stickyの使い方
デモの中では装飾に関する記述が色々と書かれていますが サイドの固定に関してはpositionとtopやleftなどの位置を書くだけです。
&_Inner{
position: sticky;
top: 0;
left: 0;
}
簡単ですね。
どんどん使っていきましょう！
※IE11はposition:stickyに対応していないため、stickyfilljsを使います
