4 ms·

I dabbled with this kind of issue in my docs and ended up using JavaScript's Intersection Observer [0]. It's not a perfect solution [1], but I think it worked w

by awayto 2y ago

I dabbled with this kind of issue in my docs and ended up using JavaScript's Intersection Observer [0]. It's not a perfect solution [1], but I think it worked well enough [2]. It just identifies when the element comes on screen and then marks it as active however you please. I do appreciate the depth the article went into though! [0] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API https://developer.mozilla.org/en-US/docs/Web/API/Intersectio... [1] https://github.com/keybittech/awayto-v3/blob/main/landing/layouts/_default/baseof.html#L29 https://github.com/keybittech/awayto-v3/blob/main/landing/la... [2] https://awayto.dev/docs/0.3.0/ https://awayto.dev/docs/0.3.0/

ruduhudi 2y ago
This is by far the best solution. Super simple and covers all those issues.
mason55 2y ago
FYI - you aren't handling the "scroll up" case. To see what I mean, click "Creating a Feature" then start scrolling up. Notice that "Creating a Feature" is still highlighted even though the entire screen is made up of text from the "Software" section. I probably only noticed this because I recently implemented a similar "active anchor" solution with Intersection Observer.