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 规则。