【转】mip-semi-fixed 走走又停停

写在前面

MIP 中悬浮元素的特殊情况

其实组件上线已经有一段时间了，最开始看到这个需求是站长提交了一个这中功能的组件过来，不过看过代码立刻就想到了 MIP 页面的特殊性：从结果页打开的 MIP 页面，是嵌套在一个 iframe 之中的。

在这种特殊的情况下，单纯的通过 position: fixed 去实现 DOM 元素的悬浮存在一系列的问题。比如，在 ios 的 safari 浏览器中，当用户滑动页面的时候，页面中的悬浮元素会随着页面的滑动而闪烁。

因此，MIP 提供了 mip-fixed 悬浮布局组件来解决这些问题。

滑动悬浮的使用场景

顾名思义就是一个 DOM 节点在滑动的一定位置的时候，变为悬浮状态。滑动悬浮的使用场景还是很多的，比如一些页面中的导航，当导航滑动到页面顶部的时候则悬浮在页面顶部，以方便用户操作。如：

业界技术实现与存在的问题

业界技术实现

目前业内针对这种滚动页面定位的情况一般使用两种逻辑来写：

（1）将悬浮前后的两个状态分成两个 dom 节点（暂时叫做 staticDOM 和 fixedDOM），并通过 JavaScript 控制两个 dom 节点的显示和隐藏。在页面到达悬浮状态之前：staticDOM 节点显示，fixedDOM 节点隐藏；到达悬浮状态之后：staticDOM 节点隐藏，fixedDOM 节点显示。

优点：JavaScript 逻辑简单
缺点：html 代码冗余

（2）只需要一个 dom 节点（暂时叫做 stickyDOM），所有的逻辑都通过 JavaScript 控制，也就是说，页面到达悬浮状态的时候，将 stickyDOM 的 CSS 样式中的 position 属性的值设置为 fixed，非悬浮状态的时候，将 stickyDOM 的 CSS 样式中的 position 属性设置为 static。

优点：html 代码清晰
缺点：由于每个页面之间的特性，比较难达到通用性

（3）通过 CSS3 的 position: sticky 实现。这是 CSS3 的新特性，不过目前还不能达到很好的兼容状态，特别是我们这种在 iframe 内的特殊情况。关于 sticky 可以参考文档 position:sticky实现iOS6+下的粘性布局

仍然存在的问题

在 ios 下的 uc、百度和手百浏览器中，无论采用哪种方法，由于浏览器原因，页面滑动的时候，所有的 JavaScript 都无法实时计算并执行。因此，只有当页面滑动停止后，JavaScript 才能去计算页面的位置，然后处理悬浮元素的状态，这样就会看到悬浮元素状态的变化有卡顿的情况，对此，目前并没有十分好的解决办法，如果大家有更好的办法，可以反馈我们。