Sticky ad marking

These examples show how to make the article ad marking sticky. This is useful for keeping the marking visible as the user scrolls through the article. There are two main approaches to achieve this.

The first example is the simple case, where there is no header or the header has fixed height. In this case, we can simply style the marking container using CSS position sticky. Any template parameters, such as the advertiser in this case, can be passed as usual.

<div class="native-article">
    <div class="native-article__marking">ADVERTISEMENT &bull; %advertiser%</div>
    <!-- The rest of the article template... -->
</div>

.native-article__marking {
    position: sticky;
    top: 64px;
    z-index: 1;
    /* other styles... */
}

The second example is the more complex case, for example when there is a header with variable height or styling preventing CSS sticky from working correctly. In this case, we need to use a relative marking. To include template parameters in this scenario, we add an input element as a child to the marking container in the article template, and provide the parameter using the data-adk-param and value attributes.

<div class="native-article">
    <div data-adk-container="native-marking">
        <input data-adk-param="advertiser" value="%advertiser%">
    </div>
    <!-- The rest of the article template... -->
</div>

Then we read the parameter value inside the marking provider and produce the desired element. ADK handles the positioning and stickiness of the marking container when using the sticky container option - no additional CSS is required.

adk.config()
    // other config...

    .addContainer('native-marking', adk.container.config()
        .provider('adk.template') // use the built-in template provider
        .sticky()
        .stickyTop('header') // CSS selector for the element to snap to
        .stickyZIndex(1)
        .panel(false) // optionally disable the panel for this container
        .params({
            template: '<div class="native-article__marking">ADVERTISEMENT &bull; %advertiser%</div>',
        }))