Been messing around with this trick to trigger styles based on how much of an element is actually visible in the viewport. It's way better than trying to use a bunch of messy intersection observers for simple things like hiding shadows or shrinking a header. I tried it on a sticky sidebar today and it worked like a charm without any heavy lifting. Just gotta make sure your container setup is right or it won't trigger properly.
@container (scrollport(0% 100%)) {.card {opacity: 0;}}It feels a bit like magic when the layout shifts perfectly as you scroll past. I was using
heavy JS much lighter CSS for this instead.