Live Match Tracker Toggle Version

Live Match Tracker can be presented as a full version or as a compact version (product extension). Live Match Tracker Compact allows basic match action to remain visible while users scroll through the odds. It is a mobile-specific solution in response to growing mobile trends.

This example shows an integration of switching from full version to compact on scroll.

#Example

<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;

#Code

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="width=device-width,minimum-scale=1">
        <title>
            Live Match Tracker Collapsable
        </title>
        <style>
            html,
            body {
                height: 200%;
            }

            body {
                display: flex;
                justify-content: center;
            }

            .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>
    </head>

    <body>
        <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: 23362837 });
            SIR("addWidget", ".sr-widget-2", "match.lmtSticky", { matchId: 23362837 });
        </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 <= 0);
                    if (shouldExpand !== expand) {
                        change(shouldExpand);
                    }
                }
            };

            document.addEventListener('scroll', onScroll, { passive: true });
        </script>
    </body>
</html>