react项目，如何实现页面滚动到某区 域时给该区域加悬浮样式？

Question

在componentDidMount里监听页面滚动，当页面scrolltop大于该区域scrolltop时，setState给区域悬浮style，否则setState去除悬浮style，每滚一次都setState一次，有什么好的解决方法吗？因为涉及state比较多，也不好针对这个写shouldComponentUpdate。一般这种情况会有什么好的方案？

Answer 1

你说的这种方法好像在ios上是无效的，position有一个sticky属性可以实现这种效果

Answer 2

感觉你的疑问是每次做setState会触发React重新做DOM DIFF运算，你觉得可能影响UI响应效率？

如果是这样，几个优化点：

1. 不要监听onScroll，两个替代方案：requestAnimationFrame/setTimeout

2. 每次setState之前做一次脏检查，临界点更替的情况 既 !== 的情况再setState