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.
<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><!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>