In the previous article on Smart CSS we used the user's scroll position to trigger a floating navigation header.
This article was originally publ...
For further actions, you may consider blocking this person and/or reporting abuse
You could use the newish, Intersection Observer API. You'd need to make an element to mark the halfway point. But you could make something like this:
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.
Or you could just provide an RSS feed sigh
What happened to the good, old and reliable tech...