Live Match Tracker Toggle Version

<style>
    .widgets {
        max-width: 480px;
        width: 100%;
        position: relative;
    }

    .sr-widget {
        border: rgba(0, 0, 0, 0.12) solid 1px;
        margin-bottom: 24px;
        overflow: hidden;
    }

    .sr-widget-title {
        font-weight: bold;
        padding-bottom: 4px;
    }

    .hidden {
        opacity: 0;
    }

    .trigger {
        height: 1px;
        width: 100%;
        position: absolute;
        top: 80px;
    }

    .extra-content {
        height: 800px;
        border: 2px dotted tomato;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        font-family: 'Roboto';
    }

    .container.mod-sticky {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .lmt-mod-stick {
        margin-top: -52px;
        transition: opacity .4s;
        height: 52px;
    }

    .sr-widget-1 {
        height: 302px;
        transition: height .5s, opacity .75s;
    }

    .sr-widget-1.hidden {
        transition: height .5s, opacity 1.25s;
        height: 52px;
    }

    .sr-widget-2 {
        margin-top: -52px;
        transition: opacity .4s;
        height: 52px;
    }
</style>
<script>
    (function (a, b, c, d, e, f, g, h, i) {
        a[e] || (i = a[e] = function () { (a[e].q = a[e].q || []).push(arguments) }, i.l = 1 * new Date, i.o = f,
            g = b.createElement(c), h = b.getElementsByTagName(c)[0], g.async = 1, g.src = d, g.setAttribute("n", e), h.parentNode.insertBefore(g, h)
        )
    })(window, document, "script", "https://widgets.sir.sportradar.com/sportradar/widgetloader", "SIR", {
        theme: false, // using custom theme
        language: "en"
    });
    SIR("addWidget", ".sr-widget-1", "match.lmtPlus", { layout: "single", scoreboard: "disable", momentum: "disable", tabPosition: "top", matchId: 42023249 });
    SIR("addWidget", ".sr-widget-2", "match.lmtSticky", { matchId: 42023249 });
</script>
<div class="widgets">
    <div class="trigger" id="js-trigger"></div>
    <div class="container" id="js-container">
        <div class="sr-widget sr-widget-1" id="js-lmt"></div>
        <div class="sr-widget sr-widget-2 hidden" id="js-lmtsticky"></div>
    </div>
    <div class="extra-content">Some content</div>
</div>
<script>
    const ref = document.getElementById('js-trigger');
    let expand = true;
    let blockRef = false;

    function setExpand(value) {
        const container = document.getElementById("js-container");
        container.classList.toggle("mod-sticky");

        const lmt = document.getElementById("js-lmt");
        lmt.classList.toggle("hidden");


        const lmtSticky = document.getElementById("js-lmtsticky");
        lmtSticky.classList.toggle("hidden");
        lmtSticky.classList.toggle("mod-stick");

        expand = value;
    }

    const onScroll = () => {
        function change(value) {
            setExpand(value);
            blockRef = true;
            setTimeout(() => {
                blockRef = false;
            }, 500);

        }

        if (!blockRef) {
            const shouldExpand = !(ref.getBoundingClientRect().top <= 400);
            if (shouldExpand !== expand) {
                change(shouldExpand);
            }
        }
    };

    const contentWrapper = document.getElementById('main-content-wrapper');
    contentWrapper.addEventListener('scroll', onScroll, { passive: true });
</script>

#Code