Skip to content

Instantly share code, notes, and snippets.

@aendrew

aendrew/.block

Last active Jul 7, 2017
Embed
What would you like to do?
fresh block
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<style>
body {
height: 5000px;
margin: 0;
padding: 0;
}
#root-bounds {
background: yellow;
position: fixed;
width: auto;
height: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
#scrolled {
position: absolute;
top: 1000px;
left: 0;
width: 100%;
height: 50px;
background: chartreuse;
}
#scrolled.active {
background: magenta;
}
</style>
</head>
<body>
<div id="root-bounds"></div>
<p>Scroll down...</p>
<div id="scrolled"></div>
<script>
const rootMargin = "200px 0px"; // This appears to do fuck-all
const negativeRootMargin = "-200px 0px"; // Meanwhile, negative works?
const rootBoundsOverlay = document.getElementById('root-bounds');
rootBoundsOverlay.style.margin = rootMargin;
const scrolled = document.getElementById('scrolled');
const i = new IntersectionObserver((intersected, io) => {
console.dir(intersected);
const [item] = intersected;
if (item.isIntersecting) {
scrolled.classList.add('active');
} else {
scrolled.classList.remove('active');
}
}, {
threshold: 0,
rootMargin: negativeRootMargin,
});
i.observe(scrolled);
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.