web-dev-qa-db-ja.com

Google AMP：スティッキーヘッダーは可能ですか？

これまでのところ、AMPページにスティッキーヘッダーを作成する確実な方法を見つけていません。私はcssの回避策/ハックがあることを知っていますが、運用環境では何も使用できません。単純な「position：fixed;」残念ながら、私の場合は機能しません。

すべてのコンポーネントの中で、スクロール時に本体クラスを切り替えるコンポーネントがあると思いましたが、まだ何も見つかりませんでした。また、「amp-position-observer」が役に立たないと考えてはいけません。

何か不足していますか？ Xピクセルのスクロール後に要素のクラス名を切り替えられるようにしたいのですが。 AMPでこれが可能かどうか。

javascriptcssamp-htmlgoogle-amp
7
Joseph Wer

Xピクセルのスクロール後に要素のクラス名を切り替えることは、現在amp-position-observer amp-stateの変更を許可しない としてサポートされていません。

Amp-animationを使用して、amp-position-observerを組み合わせてヘッダーの一部を変更できます。ただし、そのアプリケーションは サポートされるCSSプロパティが制限されている であるため制限されます。それにもかかわらず、少しの創造性があれば、このアプローチは非常に柔軟にできます。考えられるパターンの1つは、ヘッダー内の要素を複製して、スクロール位置に基づいて表示/非表示にすることです。

ここ は、現在フォーカスされているセクションに基づいてヘッダーを強調表示するサンプルです。

5
Sebastian Benz

Amp-list内にスティッキーヘッダーの実用的なソリューションを構築しました。落とし穴は、amp要素が多くの要素にdisplay: blockとposition: absoluteを追加することです。

position: stickyを使用するには、すべてのサブエレメントでdisplay: inlineおよびposition: relativeを使用する必要がありますあなたのヘッダー。これらが実際に適用され、上書きされていないことを確認します。IDを使用して、amp cssクラスよりも高い specificity を取得します。

Ampリストcssを使用した例を次に示します。

  • すべてのdivにはdisplay: inlineが必要です
  • Amp-listは、id（クラスではない）を取得して、CSSをそれ自体と生成された子divに適用します
  • display: inlineを使用している限り、divをネストできます。
.sticky {
  position: sticky;
  z-index: 1;
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  background-color:white;
  top: 40px;
}

.inline {
  display: inline;
}

#list-wrapper, #list-wrapper>div {
  display: inline;
  position: relative;
}
<div>
    <amp-list [src]="..." items="." single-item layout="flex-item" id="list-wrapper">
        <template type="amp-mustache">
            <div class="inline">
                <span class="sticky">
                    <span>Sticky header</span>
                </span>
            </div>
        </template>
    </amp-list>
    <div>Your content</div>
<div>
1
lisa p.