mip-semi-fixed 走走又停停

写在前面

MIP 中悬浮元素的特殊情况

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

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

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

滑动悬浮的使用场景

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

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

业界技术实现

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

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

• 优点：js 逻辑简单

• 缺点：html 代码冗余

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

• 优点：html 代码清晰

• 缺点：由于每个页面之间的特性，比较难达到通用性

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

仍然存在的问题

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

简介

mip-semi-fixed 是滑动悬浮组件，也可以叫做半悬浮组件，命名为 semi-fixed 的灵感来源于半导体（介于导体（conductor）与绝缘体（insulator）之间）。

代码设计融合了业界两种实现方案，非 SF 下 MIP 页面中通过 js 更换 css 实现，SF 下的 MIP 页面由于要特殊处理 fixed 元素，所以会科隆一个 dom 节点，具体代码参考 mip-semi-fixed 开源代码。

属性及节点

• threshold 属性（非必选项）

  元素 fixed 状态时距离页面顶部的距离，默认是 0。  
  

• fixedClassNames 属性（非必选项）

  元素 fixed 状态时需要添加的类，如果没有这个属性，则 组件只会悬浮不会改变样式。  
  

• div[mip-semi-fixed-container] 子节点（必选项）

  需要滑动后悬浮的 html 代码的容器，组件科隆的也是这个节点。
  
  

MIP 官网文档 mip-semi-fixed 滑动悬浮组件 中对组件各个参数的说明、使用以及默认值等进行了详细的说明。

使用

• 常规使用

  • 代码：传送门

  • 示例：传送门

• 加关闭按钮

  • 代码：传送门

  • 示例：传送门

写在后面

有任何问题可以到 github issues 提问。