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> 的宽度和高度填充粘性广告。
• 粘性广告的高度是其子元素所需的高度，最高可达其最大高度。
• 粘性广告的最大高度为 100px，如果高度超过 100px，则高度将为 100px，并且溢出内容将被隐藏。
• 粘性广告的宽度使用 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 规则。