fixedsticky v0.1.0

fixedsticky

sticky组件，支持吸顶效果

如何使用

基本使用

实例方法为：

new lib.sticky(element, options)

或者把element放到options中做为一个属性：

new lib.sticky(options)

参数

• element：一个DOM元素，或者是它的CSS选择器
• top：（非必填）吸顶时元素距离视口顶部的高度，默认值为0

• withinParent：（非必填，仅适用于Android）元素的sticky效果是否限制在父元素中，默认值为false

• init：初始化实例

• destroy：销毁实例
• refresh：重置实例，如果withinParent设置为true，且父元素高度发生变化，请立即调用此方法

说明

在iOS上，由于scroll事件只有在滚动停止时才触发，所以使用原生sticky（兼容性）实现完美的吸顶效果。

Android不支持原生sticky，使用监听scroll事件 + fixed和absolute + 一个占位元素模拟。

在使用lib.sticky组件时，为了兼容原生sticky的效果：

DOM结构必须严格遵守：

<div class="parent">
    <div class="sticky"></div>
</div>

对于sticky元素：

• 最好为static元素
• 若为定位元素
  • 只能设置z-index
  • 不要设置它的定位上下文
  • 不要设置它的top、bottom、left、right属性

对于父级元素：

• 原生sticky元素仅在它父级容器内有效，超出容器范围则不再生效了。
  • 父级高度必须大于sticky元素的高度。
  • sticky元素的底部，不能和父级底部重叠。
• 父级元素的overflow不能设置成auto、scroll、hidden。
• sticky元素只能设置top值，设置bottom值无效。

更多参考资料：

• position:sticky 使用条件分析
• position:sticky 粘性布局
• sticky模拟问题

其他：

• 由于原生sticky元素在效果断点处没有提供事件，且iOS只有在滚动停止时才抛出scroll事件，想要在吸顶时刻添加一些其他行为在iOS上暂时无法实现。