<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title> GeeksforGeeks | BlazeUI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<script nomodule="" src=
</script>
<script src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<div>
<h1 style="color: green;">
GeeksforGeeks
</h1>
</div>
<strong> Blaze UI Sticky </strong> <br> <br>
<label id="hs" for="hs">
Height Selector: 20
</label>
<input name="hs" id="heightSelector" type="range"
class="c-range c-range--error" min="10"
max="100" value="20" />
<br />
<blaze-sticky class="sticky" top="20">
<blaze-alert open type="success">
Welcome to GeeksforGeeks
</blaze-alert>
</blaze-sticky>
<div style="height: 600px;"></div>
</center>
</div>
<script>
const checkCurrent = async () => {
let tab = await $('#tabs').get(0).currentTab()
alert(`The current opened tab index is ${tab + 1}`)
}
$('#heightSelector').change(function () {
let val = $(this).val()
$('#hs').html(`Height Selector: ${val}`)
$('.sticky').each(function (index, elem) {
$(elem).attr('top', 60 * index + val)
})
})
</script>
</body>
</html>