您将如何在滚动时实现代码突出显示？

Question

I'm looking to create a blog page similar to stripes documentation. When the user scrolls the page, I would like to trigger different highlights on the code. Check out stripes documentation here and see that the code gets highlighted based on the content when you scroll. Is there a library that does this already, or what is the best approach to tackle this myself?

Answer 1

It's basically a combination of a sticky element (the code container) and linking the scroll position with css styles using JavaScript.

Here you can find more information and a nice demo for such purposes: Scroll and let content stick while animating

To sum it all up, the mechanism of how it works is really just:
1. A scrolling container
2. position: sticky;elements
3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements
4. (Sometimes) CSS transition property