स्टिकी पोजीशन वाले एलीमेंट में विभिन्न CSS स्टाइल्स को लागू करके, हम आसानी से इसका पता लगा सकते हैं।
निम्न उदाहरण इस गुण को दर्शाता है।
उदाहरण
<!DOCTYPE html>
<html>
<head>
<style>
#first {
background-color: lightgrey;
height: 10px;
}
#navbar-top {
background-color: lightgrey;
height: 2px;
}
#container {
position: sticky;
top: 0;
box-shadow: inset 0 0 25px navy;
height: 55px;
text-align: center;
font-size: 24x;
line-height: 55px;
font-weight: bold;
transition: font-size 0.4s ease-in;
}
.sticky-navbar {
box-shadow: inset 0 0 15px orange!important;
font-size: 20px !important;
}
#parent-container {
background-color: aliceblue;
height: 3300px;
}
</style>
</head>
<body>
<div id="first"></div>
<div id="navbar-top"></div>
<div id="container">Watch Me!</div>
<div id="parent-container"></div>
<script>
let newObserver = new IntersectionObserver(function(entries) {
if(entries[0].intersectionRatio === 0)
document.querySelector("#container").classList.add("sticky-navbar");
else if(entries[0].intersectionRatio === 1)
document.querySelector("#container").classList.remove("sticky-navbar");
}, { threshold: [0,1] });
newObserver.observe(document.querySelector("#navbar-top"));
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
