Style based on scroll position
Can anyone help me style an element depending on if other elements are visible at a certain position?
Put simply, I'm trying to copy the tailwind docs where the specific section label in the sidebar is highlighted when its corresponding content comes into view: https://tailwindcss.com/docs/scroll-snap-type
Scroll Snap Type - Tailwind CSS
Utilities for controlling how strictly snap points are enforced in a snap container.
1 Reply
I think you are looking for this: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
It will allow you to check whether the elements are in the viewport and the visibility of them.
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.