最好的网站建设哪家好,八年级微机网站怎么做,枣庄定制网站建设公司,wordpress wpjson写在前面
MIP 中悬浮元素的特殊情况
其实组件上线已经有一段时间了#xff0c;最开始看到这个需求是站长提交了一个这中功能的组件过来#xff0c;不过看过代码立刻就想到了 MIP 页面的特殊性#xff1a;从结果页打开的 MIP 页面#xff0c;是嵌套在一个 iframe 之中的。…写在前面
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 才能去计算页面的位置然后处理悬浮元素的状态这样就会看到悬浮元素状态的变化有卡顿的情况对此目前并没有十分好的解决办法如果大家有更好的办法可以反馈我们。
简介
mip-semi-fixed 是滑动悬浮组件也可以叫做半悬浮组件命名为 semi-fixed 的灵感来源于半导体介于导体conductor与绝缘体insulator之间。
代码设计融合了业界两种实现方案非 SF 下 MIP 页面中通过 JavaScript 更换 CSS 实现iframe下的 MIP 页面由于要特殊处理 fixed 元素所以会克隆一个 dom 节点具体代码参考 mip-semi-fixed 开源代码。
属性及节点
threshold 属性非必选项 元素 fixed 状态时距离页面顶部的距离默认是 0。 fixedClassNames 属性非必选项 元素 fixed 状态时需要添加的类如果没有这个属性则 组件只会悬浮不会改变样式。 div[mip-semi-fixed-container] 子节点必选项 需要滑动后悬浮的 html 代码的容器组件科隆的也是这个节点。
MIP 官网文档 mip-semi-fixed 滑动悬浮组件 中对组件各个参数的说明、使用以及默认值等进行了详细的说明。
使用
常规使用 代码传送门示例传送门加关闭按钮 代码传送门示例传送门
写在后面
有任何问题可以到 github issues 提问。 文章作者Pearl 转发自segmentfault
