- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Detect when an Element Gets Fixed in CSS position:sticky using Intersection Observer
By applying various CSS styles to the element with the sticky position, we can easily detect it.
The following example shows this property.
Example
<!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>Output
This will produce the following result −
Updated on 13-Mar-2021 12:06:24
- Related Questions & Answers
- CSS position: sticky;
- Role of CSS position: sticky;
- CSS position: fixed;
- How to create a fixed/sticky footer with CSS?
- How to create a sticky element with CSS?
- Fixed Positioning Using CSS
- Execute a script when the element gets focus in HTML?
- How to create a fixed/sticky header on scroll with CSS and JavaScript?
- Execute a script when the element gets user input in HTML?
- Position your HTML element with CSS
- Create a sticky navbar with CSS
- Setting Background Position using CSS
- Fixed Positioning in CSS
- Fixed Positioning with CSS
- Disable text wrapping inside an element using CSS
Advertisements