---unit tag---

<amp-state id="tsvisibilityState">

<script type="application/json">

    {

        "clhideTs": false

    }

</script>

</amp-state>

<div style="height:100px">

">

<template type="amp-mustache"> 

<div id="cl-top-sticky" class="cl-ts-visible" [class]="tsvisibilityState.clhideTs ? 'cl-ts-hidden' : 'cl-ts-visible' " >

    <amp-iframe data-block-on-consent resizable

        id="clickio-ts-creative"

        height="100"

        layout="fixed-height"

        frameborder="0"

        sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-top-navigation allow-top-navigation-by-user-activation"

        src="{{_frame_src}}"    

        on="message:AMP.setState({tsvisibilityState: {clhideTs: true}})">

        <div placeholder></div>

        <div overflow></div>

    </amp-iframe>

    <button class="cl-ts-close-button" on="tap:AMP.setState({tsvisibilityState: {clhideTs: true}})" style=""></button>

</div>

</template>

</amp-list>

</div>

---CSS Rules---

#cl-top-sticky {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100px;

    z-index: 2147483646;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

    background-color: #fff;

}

.cl-ts-hidden {

    display: none;

}

.cl-ts-visible {

    display: block;

}

.cl-ts-close-button {

    position: absolute;

    bottom: -28px;

    width: 28px;

    height: 28px;

    right: 0;

    background: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="341 8 13 13"><path fill="%234F4F4F" fill-rule="evenodd" d="M354 9.31 352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z"/></svg>')

        9px 9px no-repeat #fff;

    box-shadow: -1px 2px 1px 0 rgba(0, 0, 0, 0.2);

    border: none;

    border-radius: 0 0 0 12px;

}

#clickio-ts-list:has(#clickio-ts-creative[height="100"][width="0"]) {

    display: none;

}