【MIP官方博客】mip-semi-fixed 走走又停停

  • A+
所属分类:其他杂项
本文信息本文由方法SEO顾问发表于2017-04-2412:08:56,共 1497 字,转载请注明:【MIP官方博客】mip-semi-fixed 走走又停停_【方法SEO顾问】,如果我网站的文章对你有所帮助的话,来百度口碑给个好评呗!

写在前面

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 提问。

  • 版权声明:除非注明,本博客均为北京SEO方法的原创文章,转载或引用请以超链接形式标明本文地址,否则会在SEO圈内公开此种不尊重版权的行为,谢谢合作!本文地址:https://seofangfa.com/other-note/mip-semi-fixed.html
  • 转载请注明:【MIP官方博客】mip-semi-fixed 走走又停停_ 【方法SEO顾问】

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: