mip-semi-fixed

position:sticky 的 JS 兼容版本。页面元素滑动到顶部时自动贴顶。

示例

基本用法

<mip-semi-fixed fixed-class-names="fixed-style">
  <div mip-semi-fixed-container class="absolute-style">
    距离顶部0px时自动贴顶 magic
  </div>
</mip-semi-fixed>
<!--以下为占位符，仅用于查看组件效果-->
<div class="placeholder">小毛驴滴滴答答，</div>
<div class="placeholder">倚天剑伴我走天涯。 </div>
<div class="placeholder">大家都说我因为爱着杨过大侠，</div>
<div class="placeholder">才在峨眉山上出了家， </div>
<div class="placeholder">其实我只是爱上了峨眉山上的云和霞，</div>
<div class="placeholder">像极了十六岁那年的烟花。</div>

设置 fixed 时距离页面顶部的阈值

<mip-semi-fixed threshold="100" fixed-class-names="fixed-style">
  <div mip-semi-fixed-container class="absolute-style">
    距离顶部100px时停下
  </div>
</mip-semi-fixed>
<!--以下为占位符，仅用于查看组件效果-->
<div class="placeholder">小毛驴滴滴答答，</div>
<div class="placeholder">倚天剑伴我走天涯。 </div>
<div class="placeholder">大家都说我因为爱着杨过大侠，</div>
<div class="placeholder">才在峨眉山上出了家， </div>
<div class="placeholder">其实我只是爱上了峨眉山上的云和霞，</div>
<div class="placeholder">像极了十六岁那年的烟花。</div>

属性

threshold

说明：元素 fixed 状态时距离页面顶部的距离

必选项：否

类型：整数

取值范围：无

单位：无

默认值：0

fixed-class-names

说明：元素 fixed 状态时需要添加的类, 多个 class 之间使用空格分隔

必选项：否

类型：字符串

取值范围：无

单位：无

默认值：''

警告： fixedClassNames 写法即将废弃，请使用 fixed-class-names

子节点

div[mip-semi-fixed-container]

说明：所有 HTML 需要放在这个节点中

必选项：是

类型：DOM 节点

取值范围：无

单位：无

默认值：div[mip-semi-fixed-container]