CSS Stickyは実は簡単です

5053 ワード

どうしてこの文章を書くの?

Sticky新しい知識点ではありません.この文章を書いたのは、最近効果を実現する過程で、Stickyに対する理解にずれがあることに気づき、コードの実行結果が予想に及ばなかったからです.文章を書いてもう一度勉強することにした.

Stickyとは

Sticky(MDNをスティッキー効果に翻訳)は、CSS属性positionのオプション値です.要素の位置決め方法を記述するために、比較的多く使用されているstatic,fixed,relative,absoluteと同様に使用されます.
効果的に見ると、Stickyは混合体のようで、ページが「臨界点」にスライドする前にrelativeと表現され、「臨界点」に達したときにfixedと表現される.

使用方法

CSS Stickyを使用するには、2つの条件しか必要ありません.

position: sticky;
top: 0; // right/bottom/left      ，

top：0は、要素がビューポート0 pxからスライドしたときにスライドを続け、要素が吸い上げられることを意味する.ここで効果を見ることができます(top値を修正してみてください)

JSの実現案を比較する

CSS Stickyがないまでは、同様の効果はJSで実現されていた.大まかな手順は次のとおりです.

スクロールイベントをリスニングし、ターゲット要素のビューポートからの距離を計算します.

距離が条件を満たさない場合は、兵を押して動かない.

距離が条件を満たす場合、占有要素を作成し、目標要素の位置決め方法をfixedに変更します.

window.addEventListener('scroll', () => {
    const rect = elem.getBoundingClientRect();
    //             
})

npmでstickyキーワードを検索すると、優れたパッケージもたくさん使えます.react-stickyを例にとると、条件を満たすとplaceholder要素(ページのジッタを防止)が作成され、headerがfixedに位置決めされます.
右側はChrome Dev-Toolsのlayersパネルで、青色部分は生成されたplaceholderである.
2つのシナリオの火炎図の比較(拡大効果のためにcpuを6倍に遅らせた)

CSS方案

CSS Stickyを使用すると、仕事はすべてGPUに任せられ、JSメインスレッドのリソースを占有せず、移動端で異常にスムーズです.

React Sticky

scroll eventコールバックでgetBoundingClientRectを呼び出し続ける必要があるため、getBoundingClientRectはページの再描画をトリガーし、うっかりフレームカートンを落とす.この効果を達成するためだけに(ページには他の内容はありません)大動乾戈性の価格比は低いです.
結論:Sticky効果を実現し、優先選択CSS Sticky

理解上の偏差

1.Containing Blockでのみ有効です。

例を修正して、1つのdivでSticky Headerを包んで、Stickyの効果が失効したことを発見します!!!

  ...
  <div class="wrapper">
    <header>Sticky Headerheader>
  div>
  ...

ドキュメントによると、Stickyの効果はContaining Block内でのみ有効であり、Containing Block画面をスライドアウトすると、Stickey Elementもスライドします.wrapperの高さを修正して、効果を見ます.

.wrapper {
  height: 100px;
  background-color: #e6e6e6;
}

複数のSticky Elementを1つに置くと、前の1つが後ろの1つに突き出される特効があり、実際には本当に突き出されるのではなく、Containing Blockがそれを引きずっていく.
コードはここを見て

2.OverflowはStickyに影響する

例のコードを修正し、#rootにoverflow: autoを加える

#root {
  overflow: auto; 
}

Sticky効果は再び失われます(overflow他の非visibleに設定された有効値も同様です.)
関連するドキュメントをたくさん見て、私の結論は:Sticky Elementのoffset値は、nearest scrolling ancestor(最も近いスクロール祖先)に基づいて計算され、上の祖先要素が一致しない場合は、ビューポートが参照物として使用されます.
問題は、overflow-xまたはoverflow-yのいずれかが非visibleである場合、探しているターゲット要素とみなされますが、ウィンドウをスクロールする過程で、Sticky Elementとそれが見つけたターゲット祖先要素のoffsetの値は変更されていないため、Stickyは機能しません.
症状に応じて薬を処方し、転がりが「誤マッチング」された祖先元素内で発生すれば回復するSticky Effectである.

#root {
  overflow: auto; 
  height: 100vh;
}

互換性

prefixedを含めると、現在css sticky携帯電話端末の互換性は94.14%に達しており、残りの5.86%のユーザーの世話をする必要がある場合は、polyfillまたはposition: fixedを使用することもできます.