なぜそれが位置粘着性を受け入れる時間だ

私がCSSの位置について人々に教えたときはいつでも、私は常にposition: sticky; .
すべての位置の値のブラウザのサポートは、粘着性を除いて素晴らしいされています.だから、多くの時間を働かせていない何かを使用する点は何ですか?
しかし、私は言わなければならない、私は今私の曲を変更しました!ビルド中Frontend Mentor , 私は、リソースページに付箋メニューを作成する簡単なソリューションを探していました.メニューでは、ページのカテゴリ間でジャンプし、メインヘッダーの一部ではありません.要素がスクロールされて、コンテナが過去にスクロールされたときに去るとき、それがするのに必要だったすべてはビューポートの最上部に固執しました.
確かに、その効果を達成するためにNPMパッケージをインストールするのは非常に簡単ですが、私は可能な限り簡単なアプローチを使用したい.
私が知っているように、これは提供される正確な振舞いでしたposition: sticky; 現在のブラウザのサポートを見てみましょう.

悪くない!世界中で使用されるブラウザの86 %以上をサポートposition: sticky; そして、かなりすべての主要な現代のブラウザーは、それを支持します.
しかし、誰かがそれをサポートしていないブラウザ上のサイトに来る場合はどうなりますか?簡単!要素はビューポートにちょうど固執しません.いいえ、大量のカオスやインターネットの破壊.ちょうど粘着性のない要素.
サイトの主なユーザーは、Web開発者(両方の電流と意欲)です.それで、サイトにアクセスしている大多数の人々が現代のブラウザーを通してそうすると仮定することは全く妥当でした.
私は前に行き、それを使用し、私はそれが私の顔に笑顔を置くと言わなければならない🙂 ページをスクロールするには、ビューポートの上部に貼り付けられたメニューバーがあります.

そして、親要素を過ぎてスクロールしてしまうと、これは非表示です.

簡単!
あなたが適切にそれをチェックしたいならば.head over to the resources page on the site .
あなたのブログのポストページに粘着性サイドバーを持っているか?基本的なマークアップは次のようになります.

<!-- parent element -->
<section> 
    <article>
        ...
    </article>

    <!-- sticky element -->
    <aside>
        ...
    </aside>
</section>

としてsection 要素がビューポートから移動するaside ウィルは自分自身と画面をオフに移動します.
だから、次の時間は、粘着性のサイドバーやメニューのような私のように、使用を検討しているposition: sticky; .

連絡を取り合う

あなたがタッチで滞在したい場合は、またはTwitterで.こんにちはと言ってください!🙂