<body class="flex justify-center">
<div class="w-[990px]">
<header id="header" class="sticky h-[30px] bg-green-500">Header</header>
<div class="flex w-full">
<div id="left" class="w-1/6">
<div id="left-col" class="h-[300px] bg-red-500">left column</div>
<div id="left-nav" class="sticky top-[35px] h-[150px] bg-gray-300 invisible">left nav</div>
</div>
<div id="center" class="w-3/6">
<div class="h-[3000px] bg-blue-500">center column</div>
</div>
<div id="right" class="w-2/6">
<div class="h-[600px] bg-purple-500">right column</div>
</div>
</div>
</div>
</body>// header
const headerObserver = new IntersectionObserver((entries) => {
for(const e of entries) {
// viewport に交差し、入ったときに isIntersecting === true、出たときに false になる
const header = document.getElementById('header')
if(e.isIntersecting) {
header.classList.remove('top-0');
} else {
header.classList.add('top-0');
}
}
});
headerObserver.observe(document.getElementById('left-col'))
// left column
const leftObserver = new IntersectionObserver((entries) => {
for(const e of entries) {
// viewport に交差し、入ったときに isIntersecting === true、出たときに false になる
const nav = document.getElementById('left-nav')
if(e.isIntersecting) {
nav.classList.add('invisible');
} else {
nav.classList.remove('invisible');
}
}
});
leftObserver.observe(document.getElementById('left-col'))
External CSS
This Pen doesn't use any external CSS resources.