ElasticSticky ADDON-MOBILE

    
      <tui-scrollbar class="scrollbar">
    <p>I never wanted to do this in the first place!</p>
    <header
        tuiElasticSticky
        class="header"
    >
        <div class="wrapper">
            <span
                class="money"
                [style.fontSize.em]="scale$ | async"
            >
                {{ 237000 | tuiAmount: 'RUB' }}
            </span>
        </div>
    </header>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
</tui-scrollbar>

    
      :host {
    display: block;
}

.scrollbar {
    block-size: 12.5rem;
}

.header {
    position: sticky;
    z-index: 1;
    inset-block-start: 0;
    block-size: 5.5rem;
    pointer-events: none;
}

.wrapper {
    color: var(--tui-background-base);
    background: #bc71c9;
    font-size: 2rem;
    pointer-events: auto;
}

.money {
    display: block;
    line-height: 1em;
    padding: 1em 1.5rem;
}

Dynamic inner content

I never wanted to do this in the first place!

I always wanted to be... a lumberjack!

    
      <tui-scrollbar class="scrollbar">
    <p>I never wanted to do this in the first place!</p>
    <header
        class="header"
        (tuiElasticSticky)="onElastic1($event)"
    >
        <div
            class="wrapper"
            [style.padding.rem]="scale1 * 2"
        >
            1
        </div>
    </header>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <button
        tuiButton
        type="button"
        (click)="show = !show"
    >
        show/hide content
    </button>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    @if (show) {
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
        <p>I always wanted to be... a lumberjack!</p>
    }
    <header
        class="header"
        (tuiElasticSticky)="onElastic2($event)"
    >
        <div
            class="wrapper"
            [style.padding.rem]="scale2 * 2"
        >
            2
        </div>
    </header>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
    <p>I always wanted to be... a lumberjack!</p>
</tui-scrollbar>

Taiga UI

GitHub StackBlitz

ElasticSticky ADDON-MOBILE

On this page

Basic

Dynamic inner content