我正在尝试重新创建我猜想使用CSS/JS的某种组合的效果：
我希望固定位置图像在页面的左侧保持粘性，而文本滚动段的右侧则是右侧。图像将根据浏览器窗口中可见的文本段落而改变。
录制一个很好的网站：
在此示例中，文本还根据窗口中的位置而更改颜色。对此的简单/复杂的任何帮助或洞察力将不胜感激！
I'm trying to recreate an effect that I'm guessing employs some combination of CSS/JS:
I want a fixed position image to stay sticky on the left side of the page while paragraphs of text scroll to the right of it. The image would change depending on which paragraph of text is visible in the browser window.
Recording of a website that does this well: https://www.loom.com/share/39a65ff6d668485a89b1e2e25b2a11c9
In this example the text also changes color depending on where it is in the window. Any help or insight into how simple/complex this is would be appreciated!
发布评论
评论（1）
您可以尝试使用element.getBoundingClientRect（），这是一种返回DomRect对象的方法，该对象提供有关元素及其位置的信息。
参考： getBoundingClientRectRect
You can try using Element.getBoundingClientRect(), it's a method that returns a DOMRect object providing information about the size of an element and its position.
Reference: getBoundingClientRect