ampproject / ampproject/amphtml
Top padding for sticky top amp-ad
- 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
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