キーポイント

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

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

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

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

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

について説明します。

どのような問(wèn)題を解決しますか？

position: stickyこの

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

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

position

Codepenサンプルリンク

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

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

別の同様のアプローチは、これらの値を含む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を処理しないことに注意してください。これらのブラウザ（貧しい！）に対処する必要がある場(chǎng)合は、検討できるポリフィルオプションを提供します。

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

Codepenサンプルリンク

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

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

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

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最終結(jié)果は、この次のデモに示されています：

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

Codepenサンプルリンク

問(wèn)題が何であり、JavaScriptベースのソリューションが何であるかをよく把握しているので、近代化を受け入れ、これが何であるかを議論する時(shí)が來(lái)ました。

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

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

は、CSS

プロパティに導(dǎo)入された新しい値です。この値は、與えられたオフセットしきい値に到達(dá)するまで、その親要素內(nèi)の

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

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

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

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

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

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

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

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

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

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

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

position: sticky

Codepenサンプルリンク

結(jié)論

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

またはに優(yōu)雅にダウングレードします。

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

に関する

FAQ

CSS位置の粘著性と他のCSSの場(chǎng)所の違いは何ですか？

css

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

なぜ私のCSSの粘著性が機(jī)能しないのですか？

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

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

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

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

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

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

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

粘著性要素がローリングコンテナの內(nèi)側(cè)にある場(chǎng)合、下にスクロールすると容器の上部に付著し、コンテナの下端が過(guò)ぎ去ると貼り付けられます。

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

はい、要素の下部でcss

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

css位置粘著マージンでどのように機(jī)能しますか？

結(jié)婚とCSS

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

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

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

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

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

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

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

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

はい、CSS遷移でCSS

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

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

以上がCSS 'Position：Sticky' - 紹介とポリフィルの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。