哪些浏览器支持,可以查看:http://caniuse.com/#search=sticky

用这个属性,主要是ios下的safari已经支持了,在ios下可以免去js模拟,效果更平滑。

在移动端模拟sticky效果,还是非常蛋疼的,需要同时监听touchmove和scroll事件,页面惯性滚动时会有一定的延迟(scorll事件在滚动停止才触发),同时移动端对fixed定位支持也不大好。JS实现,效果还是大打则扣。

关于这个position:sticky的介绍,可以google一下,网上有很多介绍了,比如神飞的《position:sticky介绍》

 

今天主要讲的是,position:sticky的使用条件,很多同学经常遇到position:sticky失效的情况,今天对sticky这个属性做了一番调试,总结了一些规律。现分享下。

俗话说,弄不清楚原理,就熟记结论也是一样的,那就先抛结论,sticky满足以下条件才能生效:

1、具有sticky属性的元素,其父级高度必须大于sticky元素的高度。

2、sticky元素的底部,不能和父级底部重叠。(这条不好表述,文后详细说明)

3、sticky元素的所有父级不能含有overflow:hidden 和 overflow:auto 属性

4、必须具有top,或 bottom 属性。

同时要注意,sticky元素仅在他父级容器内有效,超出容器范围则不再生效了。

 

先看个正常生效的DEMO:

See the Pen fqdkF by hugo (@baofen14787) on CodePen.

然后在sticky元素外套个div,再看看效果,发现sticky效果失效了。原因是结论的第一点,sticky元素的父级高度刚好等于sticky的高度,所以失效

See the Pen cgHdq by hugo (@baofen14787) on CodePen.

继续看第3个DEMO,也是失效的。虽然父元素的高度大于sticky元素的高度,但是sticky元素的底部刚好也是父元素的最后一个元素。(和父元素的底部重叠了)
实际上,sticky元素仅在他父级容器内有效,而sticky刚好已经到了生效的最边缘了,所以看起来就失效了。

See the Pen lKgtC by hugo (@baofen14787) on CodePen.

继续第4个DEMO,给父级容器加上overflow:hidden,sticky效果又失效了。

See the Pen okgGn by hugo (@baofen14787) on CodePen.

最后再说一下,sticky仅在父元素内生效,看DEMO

See the Pen zqyog by hugo (@baofen14787) on CodePen.

好了,DEMO放完,最后给个作业,请将这个页面sticky效果修复.

See the Pen vamnz by hugo (@baofen14787) on CodePen.

6 thoughts on “position:sticky 使用条件分析

  1. Pingback: React Native ListView sticky效果实现 | Hugo Web前端开发

  2. Pingback: React Native ListView sticky效果实现 |

Leave a reply

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> 

required