CSS 'Position：Sticky' - 紹介とポリフィル

キーポイント

• cssのposition: stickyプロパティにより、ユーザーがページに固定せずにスクロールすると、ナビゲーションバーまたは他の要素が表示されたままになります。このプロパティは、与えられたオフセットしきい値に到達するまで、親要素内の静的位置のように機能します。 fixed この効果を達成する従来の方法には、ページのスクロールイベントが聴取され、JavaScriptを使用して、ビューポートの現在の位置に基づいて
およびプロパティの値を変更するJavaScriptが含まれます。ただし、要素の位置が
• に変化すると、このメソッドは問題を引き起こし、ページストリームを残し、下の要素を「ジャンプアップ」します。 position top現在、「fixed」属性のブラウザサポートは限られています。ただし、フィラメントグループに固定されたスティッキー、マシューフィリップスの位置 - 焦げ付き防止、オレグコルスンスキーのスティッキーフィルなど、この機能を提供するために使用できるポリフィルがいくつかあります。
• position: stickyAnnarita Tranficiの記事「明白なデザインは常に勝つ」を読んだことがあるなら、あなたは彼女に同意するかもしれません：

人々は一般的なパターンを見ることを期待しています。ページの上部にメインメニューを見つけ、右上隅にある検索ボックスを見つけ、下部にあるフッターを見つけます。

人々は、ウェブサイトの特定のコンポーネントが特定の場所に配置されることを期待していることに同意します。これは、私の意見では、メインメニューにとってより重要です。

時々、顧客の要件のため、またはこれが最良のアプローチであると判断したため、基本的にページコンテンツに従って、そのページを所定の位置に固定せずに常に表示する必要がある場合があります。近年、CSSだけがこのタスクを完了できないため、多くのJavaScriptベースのソリューションがリリースされています。

この記事では、この問題の新しいCSSソリューションである

について説明します。

どのような問題を解決しますか？

position: stickyこの

プロパティの新しい価値について議論する前に、私たちが解決しようとしている問題をよりよく理解しましょう。

素晴らしいウェブサイトのメインメニューがタイトルの後にあるが、まだページの上部（サイドバーではない）にあり、利用可能なすべての幅を取り上げるとします。これは次のようになるかもしれません：

position

Codepenサンプルリンク

私たちが達成したいのは、ユーザーがページをスクロールすると、メニューがビューポートの上部にユナイテッドになったら、メニューはビューの外側にスクロールせず、上位の位置に固執することです。 同じ（ビューポートの上部に到達した場合のみ）。

従来のコードでこれを達成するには、JavaScriptを追加する必要があります。ページ上のイベントのスクロールを聴き、JavaScriptを使用して、ビューポートの現在の位置に基づいてpositionおよびtopプロパティの値を変更します。具体的には、メニューがビューポートの一番上にある場合、メニューにtop: 0とposition: fixedを追加する必要があります。そうしないと、属性がデフォルト値に復元されます。

別の同様のアプローチは、これらの値を含むCSSにクラスを作成し、必要に応じてJavaScriptを使用してクラスを追加および削除することです。これは次のようになります。

var menu = document.querySelector('.menu')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition) {
        menu.style.position = 'fixed';
        menu.style.top = '0px';
    } else {
        menu.style.position = 'static';
        menu.style.top = '';
    }
});

このコードスニペットは、古いバージョンのInternetExplorerを処理しないことに注意してください。これらのブラウザ（貧しい！）に対処する必要がある場合は、検討できるポリフィルオプションを提供します。

この2番目のステップのリアルタイムデモは次のとおりです。

Codepenサンプルリンク

しかし、待ってください！このコードによって引き起こされた問題を見つけることができますか？私たちがこれまでに開発したものを含め、私が見た多くの実装は、重要な問題を考慮していません。要素の位置を

に変更すると、ページのストリームを離れるため、以下の要素は要素の高さのピクセル数にほぼ等しく「ジャンプ」します（この「ジャンプ」の高さは依存しますマージン、境界など）。

fixed可能なソリューションは、「貼り付け」したい要素と同じサイズのプレースホルダー要素を注入することです。そうすれば、粘着性要素のスタイルを更新すると、ジャンプがないようにします。さらに、正しい値が設定されている場合、理由もなく値を繰り返し再割り当てしたくありません。最後に、CSSクラスを使用して説明した手法を採用したいと考えています。

JavaScriptコードの最終バージョンは次のとおりです。

これは

クラスの宣言ブロックです：

var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;

window.addEventListener('scroll', function() {
    if (window.pageYOffset >= menuPosition.top && !isAdded) {
        menu.classList.add('sticky');
        menu.parentNode.insertBefore(placeholder, menu);
        isAdded = true;
    } else if (window.pageYOffset < menuPosition.top && isAdded) {
        menu.classList.remove('sticky');
        menu.parentNode.removeChild(placeholder);
        isAdded = false;
    }
});

sticky最終結果は、この次のデモに示されています：

.sticky {
    top: 0;
    position: fixed;
}

Codepenサンプルリンク

問題が何であり、JavaScriptベースのソリューションが何であるかをよく把握しているので、近代化を受け入れ、これが何であるかを議論する時が来ました。

ポジションとは：粘着性？

position: sticky前のセクションを注意深く読んだら、「なぜブラウザが私のためにこれをすることができないのかと思っているかもしれません！

は、CSS

プロパティに導入された新しい値です。この値は、与えられたオフセットしきい値に到達するまで、その親要素内の

のように動作する必要があります。言い換えれば、

を使用することにより、javaScriptなしで前のセクションで説明した問題を解決できます。 sticky position前の例をレビューして、この新しい値を使用して、次のことを記述できます。 position: static fixedブラウザは残りをします！そんなに簡単です。 position: sticky

ブラウザのサポートとポリフィル

この新しい値のサポートは現在非常に悪いです。各ブラウザのスタック状況は次のとおりです

firefox 26 - css.sticky.enabledをcss.sticky.enabledの設定でサポートしています。
Chrome 23 - Chrome：// Flagsで実験的なWebプラットフォーム機能を有効にすることでサポートされています。
Chrome 38（？） - Chromeチームは最近、この機能をBlinkから削除したため、現在、Chrome Canary（バージョン38.x）では利用できません。削除を説明するバグレポートを読むことができますが、この機能はまもなく再実装され、安定したバージョンのサポートを中断しない可能性があると思います。
safari 6.1 -
• ベンダープレフィックスを使用してこの値をサポートします（すなわち-webkit）position: -webkit-sticky
Opera 23 - About：Flagsで実験的なWebプラットフォーム機能を有効にすることでサポートされています。
Internet Explorer - サポートされていません（ステータスを参照）

を参照してください。すべての詳細については使用できますか。 position: sticky

幸いなことに、選択できる多数のポリフィルがあります

フィラメントグループの固定焦げつけ（jqueryが必要）

• マシューフィリップスのポジション - スティッキー - （Modernizrでの検出）
• フィリップウォルトンのpolyfill.jsライブラリ position: stickyFabrice Weinbergの
Codepen Demo（jquery required）
• position: sticky oleg KorsunskyのStickyFill（IE9）
demo

次のデモンストレーションは、

の実際の効果を示しています。前述のように、それを機能させるために、そしてあなたが使用しているブラウザに応じて、あなたはフラグを有効にする必要があるかもしれません。

position: sticky

Codepenサンプルリンク

結論

この新機能には優れたブラウザのサポートはありませんが、PolyFillを使用することもできます。Modernizrで代替スタイルを定義する場合は、デフォルトの

またはに優雅にダウングレードします。

position: staticこのプロパティを試したことがある場合、または他のポリフィルを知っている場合は、コメントでお知らせください。 position: fixed CSS位置の粘着性（FAQ）

に関する

FAQ

CSS位置の粘着性と他のCSSの場所の違いは何ですか？

css

は、相対的なポジショニングと固定ポジショニングの混合です。これにより、要素は、特定のスクロールポイントに到達するまで、その親要素内の相対位置のように動作し、その時点で固定位置になります。これは、他のCSSの場所とは異なります。たとえば、「相対的な」位置では、要素の通常の位置に対する要素を位置付けることができますが、「固定」の位置は要素をブラウザウィンドウに対して配置し、ページがスクロールされていても移動しません。 「絶対」位置は、最新の位置付けられた祖先に対する要素を見つけます。「静的」はデフォルト値であり、ページの通常のフローに応じて要素を見つけます。

なぜ私のCSSの粘着性が機能しないのですか？

cssposition: stickyはいくつかの理由で機能しません。一般的な理由は、親要素のoverflow属性がhidden、auto、またはscrollに設定されていることです。もう1つの理由は、粘着性の要素がそれよりも高い兄弟を持ち、ビューポートからスクロールする原因となることかもしれません。また、一部のブラウザでは、CSS position: stickyがテーブル要素で動作しないため、粘着性要素がテーブル要素ではないことを確認してください。

CSSをすべてのブラウザで粘着性のある作業に位置付ける方法は？

cssposition: stickyは最新のブラウザーで広くサポートされていますが、一部の古いバージョンでは機能しない場合があります。すべてのブラウザにわたって互換性を確保するために、PolyFillを使用できます。 PolyFillは、ブラウザにネイティブに提供すると予想されるテクノロジーを提供するスクリプトです。 CSSの人気のあるポリフィルは粘着性です。 position: sticky

他のCSSプロパティに粘着性のCSS位置を使用できますか？

はい、他のCSSプロパティでCSS

を使用できます。たとえば、それをposition: stickyで使用してスタッキング順序を制御するか、z-indexで要素が粘着性になったときに影効果を作成できます。 box-shadow

CSSの位置粘着性は、スクロールコンテナでどのように動作しますか？

粘着性要素がローリングコンテナの内側にある場合、下にスクロールすると容器の上部に付着し、コンテナの下端が過ぎ去ると貼り付けられます。

要素の下部でCSS位置の粘着性を使用できますか？

はい、要素の下部でcss

を使用できます。 position: sticky属性の負の値を指定するだけです。これにより、要素が容器の底に付着します。 bottom

css位置粘着マージンでどのように機能しますか？

結婚とCSS

は、相対的なポジショニングで作業するのと同じように機能します。マージンは、元の位置ではなく、粘着性の位置に対して粘着性要素を移動します。 position: sticky

水平スクロールにCSS位置の粘着性を使用できますか？

はい、水平スクロールにはCSS

を使用できます。 position: stickyまたはleft属性の値を指定するだけでなく、rightまたはtop属性を指定する必要があります。 bottom

CSS位置を使用して、スクロールオフセットを制御するにはどうすればよいですか？

スクロールオフセットは、

、top、right、およびbottomプロパティによって制御されます。これらのプロパティに指定する値は、要素が貼り付けを開始するビューポートの対応するエッジまでの距離を決定します。 left

CSS遷移でCSS位置を使用することはできますか？

はい、CSS遷移でCSS

を使用できます。ただし、遷移は、要素が相対位置から固定位置に変化する場合にのみ適用されることを忘れないでください。 position: sticky

実際のCodePenの例にアクセスできないため、CodePenリンクをプレースホルダーに置き換えたことに注意してください。これらのプレースホルダーを実際のリンクに置き換える必要があります。 さらに、元のテキストを可能な限り書き直し、元の意味を変えずに記事をよりスムーズで自然にするよう努めています。

以上がCSS 'Position：Sticky' - 紹介とポリフィルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。