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