amp-sticky-ad

Открыть в песочнице

Introduction

amp-sticky-ad adds support for ad units that always take a fixed place in the viewport in your AMP HTML files.

The sticky ad will appear at the bottom of the page.

Basic usage

Import the amp-sticky-ad component in the header.

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

Use an amp-ad as a direct child of amp-sticky-ad. The height of the amp-sticky-ad will be determined based on the height of the amp-ad child. The max-height of the sticky-ad is 100px, if the height exceeds 100px then the height would be 100px and overflow content will be hidden.

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

amp-sticky-ad will display after scroll one viewport height from top provided there is at least one more viewport of content available.

The text that follows is intentionally Lorem Ipsum to ensure that there is another viewport from the first one on top to demonstrate amp-sticky-ad.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor, ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.

Требуются дальнейшие объяснения?

Если на этой странице нет ответов на все ваши вопросы, обратитесь к другим пользователям AMP и обсудите свой конкретный сценарий использования.

Перейти на Stack Overflow

Не нашли пояснения к функции?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Редактировать пример на GitHub

Written by @kul3r4