Added sticky ad to amp-ad example

[kul3r4]

Adding example for ampproject/amphtml#2472.
@juliantoledo @jmadler PTAL

[kul3r4]

Validator is not supporting amp-sticky-ad, so I created this

[kul3r4]

@jmadler PTAL

[jmadler]

These units are often called "adhesion" units, so I'd add that word for folks who are more familiar with it

[cramforce]

"adhesion unit" is something very specific (at least to some people) that is different in specifics from amp-sticky-ad. Should this be in our examples before we tried it with a few pubs?

[kul3r4]

I changed the add that i was using for the sticky one so that is smaller than 100px and fits the container.
@cramforce did you meant you want to wait to publish an example with amp-sticky-ad?

[cramforce]

@kul3r4 Yeah, I thought, we might test this out with a few publishers before giving it publicity. On the other hand, we did publish the docs, so we might as well :)

@kashyapnitin What you do you think?

[kul3r4]

@sebastianbenz @juliantoledo PTAL, we are trying to get this ready today.

[sebastianbenz]

amp-sticky-add is its own component. I think this would justify putting it in its own sample file. Thoughts?

[kul3r4]

I created a separate example, PTAL.

[kul3r4]

Using a different ad to get the experiment more robust.

[jasti]

@kul3r4 There are two optional params that can be passed to the sticky ad declaration for the background of the container and background of the container while load time. @zhouyx is working on updating the README, but once we have that, would be great to have those params showcased in the example.

[zhouyx]

@jasti Am I understand the requirement wrong? Now the two background setting params are not passed to sticky ad declaration. I have them set through standard CSS.
ampproject/amphtml#3486

[jasti]

Thanks @zhouyx . I think it's fine to expose these using standard CSS classes.
@kul3r4 Would be great to have an extra example with modified (using CSS) background setting params on the page.

[kul3r4]

@zhouyx @jasti , I tried to add:

.amp-sticky-ad { background-color: #fce4ec } .amp-sticky-ad-loaded { background-color: #f48fb1 }

in the <style amp-custom> section, but when the page is rendered, I don't see those two classes being added to the html, so the background does not get set.

I don't see those classes being added into the code, am I missing something?

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

[googlebot]

CLAs look good, thanks!

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request) and all commit authors, but as best as we can tell these commits were authored by someone else. If that's the case, please add them to this pull request and have them confirm that they're okay with these commits being contributed to Google. If we're mistaken and you did author these commits, just reply here to confirm.

[googlebot]

CLAs look good, thanks!

[kul3r4]

@sebastianbenz PTAL

[sebastianbenz]

LGTM

[jasti]

@zhouyx any thoughts on @kul3r4 's question on adjusting background colors please?

.amp-sticky-ad { background-color: #fce4ec } .amp-sticky-ad-loaded { background-color: #f48fb1 }
in the <style amp-custom> section, but when the page is rendered, I don't see those two classes being added to the html, so the background does not get set.
I don't see those classes being added into the code, am I missing something?

[zhouyx]

@kul3r4 The code should be in canary today. And those two classes should be available then.