Are there ready-made libraries or examples in the sandbox for changing the picture on the phone when scrolling the page?

Question

css

Good day, colleagues! Has anyone come across a similar case, where the phone is in place and when scrolling, the pictures inside change, in their work https://www.apple.com/apple-news/ ? You need exactly the same behavior. Are there ready made solutions for this?

Answer 1

Set the phone to position: sticky, loop through the position values ​​of all text blocks getBoundingClientRect, get the current scroll value window.pageYOffsetand compare with the current position of the text block. By condition, change the class of the phone. Profit)