摘要：代码设计融合了业界两种实现方案，非下页面中通过更换实现，下的页面由于要特殊处理元素，所以会科隆一个节点，具体代码参考开源代码。子节点必选项需要滑动后悬浮的代码的容器，组件科隆的也是这个节点。
写在前面 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 提问。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82307.html
摘要：持续更新的笔记，链接地址此篇文章的笔记地址字符到底发生了什么变化走走看看系列，特别鸣谢奇舞读书会看正文之前，先思考一下，为什么你看的各种权威指南里提到的 持续更新的github笔记，链接地址：Front-End-Basics 此篇文章的笔记地址：字符到底发生了什么变化 ES6走走看看系列，特别鸣谢奇舞读书会~ 看正文之前，先思考一下，为什么你看的ES6各种权威指南里提到的
摘要：在月日下午的新制造专场分论坛上，华中数控董事长陈吉红说，通过数控机床在左走走右走走时的轴承等设备的数据变化，可以对其健康状况进行检测。传统的数控机床本身有很多传感器，小时可以采集产生的数据。现在华中数控会每天早上让数控机床做健康体检，跳广场舞，左走走，右走走。在12月15日下午的新制造专场分论坛上，华中数控董事长陈吉红说，通过数控机床在左走走、右走走时的轴承等设备的数据变化，可以对其健康状况...
摘要：块级声明块级声明是用于声明在指定块的作用域之外无法访问的变量。美元符号可以放到任何一个位置，甚至单独一个美元符号。块级函数从开始，在严格模式下，块里的函数作用域为这个块。 持续更新的github笔记，链接地址：Front-End-Basics 此篇文章的笔记地址：字符到底发生了什么变化 ES6走走看看系列，特别鸣谢奇舞读书会~ 块级作用域又称词法作用域，存在于： 函数内部（...
摘要：今天我们就讨论下编程之外的个拓展自己的方式。不同的人对于攀登珠峰可能有不同理解，有些人眼中是特种旅游项目，有些人眼中是超越自身生理心理修行，有些人眼中的炫耀工具，有些人眼中的一生的奋斗目标，有些人眼中的商业生意，有些人眼中的终身事业。 编程不是目的，然而编程之外，有更多精彩需要我们体会，毕竟人生可不止于编程。今天我们就讨论下编程之外的8个拓展自己的方式。如果你有自己的好的方式，欢迎参与...
阅读 2373·2021-11-17 17:00
阅读 1512·2021-10-11 10:57
阅读 3470·2021-09-09 11:33
阅读 692·2021-09-09 09:33
阅读 3416·2019-08-30 14:20
阅读 3211·2019-08-29 11:25
阅读 2699·2019-08-26 13:48
阅读 610·2019-08-26 11:52
