ampproject / ampproject/amphtml

Top padding for sticky top amp-ad

Open
#36,371 15 comments 0 reactions 0 assignees View on GitHub
Stale Type: Feature Request WG: monetization
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

We're adding a sticky ad to the top of the viewport. Since `amp-stick-ad` only supports ads at the bottom of the page, we are using `amp-ad` with the `sticky` option set to "top".

However, due to the lack of padding, the ad will cover content at the top of the page. `amp-sticky-ad` takes care of this by adding padding when the botton of the page is reached. As mentioned in the [docs](https://amp.dev/documentation/components/amp-sticky-ad/):

> When scrolled to the bottom of the page, the viewport is automatically padded with the additional height of the sticky ad, so that no content is ever hidden.

Can this feature be added to **amp-ad**? Or can **amp-sticky-ad** be modified to support top ads?

Please let me know if you have any questions or possible solutions. Thanks!

### Alternatives Considered

- amp-sticky-ad which is unusable due to it not supporting top ads
- trying to detect visibility of the amp-ad when scrolling and the using css to add padding. This is difficult because when the ad appears only its inline styles change, so it's hard to target it in a safe and consistent way. We also want to minimize the page shifting down if that's even possible (for CLS / web vitals / UX reasons).

### Additional Context

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by reviewing the amp-ad sticky="top" behavior and the amp-sticky-ad documentation linked in the issue, focusing on how bottom ads add viewport padding. Determine the expected top-ad behavior and how to avoid covering content or causing unnecessary layout shifts. Done means the supported top-sticky path preserves visible content and has coverage for the resulting behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.