<div class="ad-mobile-adhesion js-ad-mobile-adhesion">
<button class="btn btn--close js-btn-close">
<svg class="icon icon--close">
<use xlink:href="/assets/icons/sprite-sheet.svg#close"></use>
</svg>
<span class="visually-hidden">Close Menu</span>
</button>
<div class="ad-container">
<a href="#">
<picture>
<source srcset="/assets/images/ads/320x50.jpg" media="(min-width: 769px)">
<img src="/assets/images/ads/320x50.jpg" alt="Text ad for Dear Evan Hansen, a new musical on a blue background" />
</picture>
</a>
</div>
</div>
<div class="ad-mobile-adhesion js-ad-mobile-adhesion">
{{render '@buttons--close'}}
{{render '@ads--320x50' mobile-adhesion merge=true}}
</div>
/* No context defined for this component. */
/**
* @overview Close interaction for mobile adhesion ad.
* @module Mobile Adhesion.js
*/
const mobileAd = document.querySelector(`.js-ad-mobile-adhesion`);
if (mobileAd) {
const closeButton = mobileAd.querySelector(`.js-btn-close`);
closeButton.addEventListener(`click`, () => {
mobileAd.classList.add(`is-closed`);
});
}
.ad-mobile-adhesion {
position: fixed;
bottom: 0;
width: 100%;
z-index: 10;
background: $color-white;
border-top: 1px solid $color-border;
transform: translateY(0);
transition: $transition;
&.is-closed {
transform: translateY(calc(100% + 2rem)); // 100% + Close btn top position.
}
@include breakpoint($break-small) {
display: none;
}
}
.ad-container {
.ad-mobile-adhesion & {
margin: 0.5rem 0;
}
}
.btn--close {
.ad-mobile-adhesion & {
position: absolute;
top: -2rem;
right: 0;
background: $color-white;
border-top: 1px solid $color-border;
border-left: 1px solid $color-border;
}
}
The persistent mobile ad is only viewable at mobile sizes and can be demoed here: persistent mobile.