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