position:sticky粘性布局

position:sticky粘性布局

作用

  • 它是相对定位position:relative和固定定位position:fixed的混合。在屏幕范围时该元素并不受到定位的影响(left、top等属性),当该元素将要滚动到某一阈值点(例:top:10px;),根据left、top等属性成固定定位fixed的效果。
  • 不再用监听scroll事件,既可实现导航栏滚动绝对定位的效果

生效条件

  • 父元素不能overflow:hidden或者overflow:auto属性
  • 必须指定topbottomleftright4个值之一,否则只会处于相对定位
  • 父元素的高度不能低于sticky元素的高度
  • sticky元素仅在其父元素内生效

注意:该元素不脱离文档流,仍然保留元素原本在文档流中的位置

兼容性

  • [ ] IE11
  • [x] edge
  • [x] chrome
  • [x] firxfox
  • [x] safari

Q: 如何兼容IE11?

A: 使用position: fixed;,或者使用sticky填充包

Q: Safari中无效如何解决?

A: 使用posititon :-webkit-sticky;

能够解决哪些问题?

  • 当元素使用transform属性时,会限制position:fixed的跟随效果,这时可以使用position:sticky来兼容fixed定位

    这个影响只出现在chrome和firefox中

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 10,529评论 1 89
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 18,820评论 1 40
  • 先放效果图镇楼:(其实主要效果在于左上角的字母条在滑动过程中黏性覆盖固定) 当前系统支持效果:iOS(当然Andr...
    Axiba阅读 1,553评论 0 0
  • 大家好,我是IT修真院深圳分院第06期学员,一枚正直善良的web程序员。 今天给大家分享一下,修真院官网 CSS任...
    不二先森zZ阅读 1,981评论 0 2
  • 今天又一次听了《清单革命》这本书,让我有一个感受,就是任何事情自己都可以做到、做好、做完美! 因为所有的事情,大到...
    悦知谦品店阅读 38评论 0 1