While IntersectionObserver is a super nice API, it's not really in line with the purpose behind the article, which is doing this by feeding info to CSS using JavaScript and not controlling the hiding and showing of elements with JavaScript. Thereby completely separating CSS from JavaScript.
The two approaches seem compatible to me! If the intersection observer updated the body class with a data-last-landmark attribute, instead of a raw %, you could still reference off of that with CSS.
Thanks, Andrew!
While IntersectionObserver is a super nice API, it's not really in line with the purpose behind the article, which is doing this by feeding info to CSS using JavaScript and not controlling the hiding and showing of elements with JavaScript. Thereby completely separating CSS from JavaScript.
The two approaches seem compatible to me! If the intersection observer updated the
bodyclass with adata-last-landmarkattribute, instead of a raw %, you could still reference off of that with CSS.Interesting approach! That would certainly work I think.
I see, my apologies 🙂
Generally, I try to avoid listening on scroll because it can cause jank when scrolling (especially on mobile).
That being said, "premature optimization is the root of all evil" 😅
It’s something to surely take into account, that said, the previous article outlines some of the performance improvements applied in the code.