고정 위치가 있는 요소에 다양한 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> 출력
이것은 다음과 같은 결과를 생성합니다 -
