滑动页面时，元素所处的高度百分比在不断变化，如何相应变化 CSS 值？

元素在页面的不同高度，用百分比表示，例如最底部是 100%，顶部是 0%，中间是 50%。

根据所处的不同高度，相应地控制 CSS 值。

例如 opacity：在 100% 关键帧处为 0 ；在 50% 处为 1。那么在滑动的过程中，就会随着高度的变化而产生任何 CSS 样式的变化。同理，可以是 translate 的 Y 值改变。

是否有 JavaScript 可以实现这个需求呢？

*在此基础上，再讨论动画方法的问题，例如贝塞尔曲线和延时。

SilentDepth

2017-10-08 22:33:13 +08:00

如果元素的位置是相对 <body> 而定的话，监听 scroll 事件计算元素当前相对于 viewport 的位置，相应地改变其样式就好了。不过似乎我没太看懂楼主的描述……

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.