DEMO 4

DEMO 2で実現できたかに見えたスクロール追従。

外した途端にダメになったスライダーを調べてみたところ、スライダーのエフェクトのためにJSプラグインが勝手に付与してる「transform: translate3d(-290px, 0px, 0px);」があることで、追従固定のメニューもスムーズに動いていた模様。

そのため、メニューでもなんでも、何かしら全ページに存在する要素に「transform: translate3d(0px, 0px, 0px);」って入れたら大丈夫ってことみたいです。

しかしそれじゃなんか気持ちわるいし無駄なCSS追加したくないし、ってことで「will-change: transform;」(https://developer.mozilla.org/ja/docs/Web/CSS/will-change)です。

なんかグラフィックアクセラレーションとかいうやつを使いますよって宣言してるやつみたいですが、それに関してはまた今度調べてみます。おわり

DEMO 4