amp-sticky-ad

1.0 0.1

<script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

用法

提供一种在页面底部显示和固定广告内容的方式。

• 一个 AMP 文档中只能有一个 <amp-sticky-ad>。<amp-sticky-ad> 应该只有一个直接子元素：<amp-ad>。注意：请确保包含 <amp-ad> 组件所需的任何脚本。
• 粘性广告出现在页面底部。
• 粘性广告引入一个全宽的空白容器，然后根据 <amp-ad> 的宽度和高度填充粘性广告。
• 粘性广告的高度是其子元素所需的任何高度，直至其最大高度。
• 粘性广告的最大高度为 100 像素，如果高度超过 100 像素，则高度将为 100 像素，并且溢出内容将被隐藏。
• 粘性广告的宽度使用 CSS 设置为 100%，并且无法覆盖。
• 粘性广告的不透明度使用 CSS 设置为 1，并且无法覆盖。
• 可以自定义粘性广告的背景颜色以匹配页面样式。但是，任何半透明或透明背景将不被允许，并将更改为非透明颜色。
• 当滚动到页面底部时，视口会自动填充粘性广告的额外高度，以便不会隐藏任何内容。
• 在横向模式下，粘性广告是居中对齐的。
• 粘性广告可以通过关闭按钮关闭和删除。
• 如果没有填充广告，粘性广告容器将折叠并且不再可见。

示例

<amp-sticky-ad layout="nodisplay">
  <amp-ad
    width="320"
    height="50"
    type="doubleclick"
    data-slot="/35096353/amptesting/formats/sticky"
  >
  </amp-ad>
</amp-sticky-ad>

属性

layout（必需）

必须设置为 nodisplay。

样式

可以使用标准 CSS 设置 amp-sticky-ad 组件的样式。

• 可以通过 amp-sticky-ad CSS 类设置粘性广告容器样式。
• 可以通过 amp-sticky-ad-close-button CSS 类设置关闭按钮样式。
• 可以通过 amp-sticky-ad-top-padding CSS 类设置广告和关闭按钮之间的填充条样式。

验证

请参阅 AMP 验证器规范中的 amp-sticky-ad 规则。