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