170207、粘性定位实现滚动到指定位置元素固定显示

CSS中 position 属性设置元素的定位方式,为将要定位的元素定义定位规则

元素主要有以下几种定位方式

  • position: static;

  • position: relative;

  • position: absolute;

  • position: fixed;

  • position: sticky;

position:sticky是一个新的css3属性,在之前,如果希望某元素在页面滚动到某处时固定在窗口某个位置,需要监听滚动事件,然后按指定阀值将元素的定位方式从reletive切换到fixed,这种效果不够平滑,尤其是在ios上,页面滚动时会暂停js的执行,直到滚动结束,粘性定位可以很好解决这个问题

static 
静态定位,元素处于文档流中,此时 top, right, bottom, left 和 z-index 属性无效

relative 
相对定位,根据top,bottom,left,right属性在正常的文档流中偏移元素的位置,z-index有效

absolute 
绝对定位,脱离文档流,相对于 static 定位以外的最近的祖先元素进行定位,将其定位在指定位置相对于其最近定位的,如果没有,则相对于根元素

fixed 
固定定位,脱离文档流,相对于视口进行定位,滚动时,元素的位置不变

sticky 
粘性定位,元素处于文档流中,采用相对定位,但会在滚动到某个位置时变为fixed定位,且相对于其最近的块级祖先元素进行定位

用法

.sticky { position: sticky; top: 10px; }

在viewport 视口滚动到元素 top 距离小于 10px 之前,元素为相对定位。之后,元素将固定在与顶部距离 10px 的位置,直到 viewport 视口回滚到阈值以下

需要注意的是sticky 生效应至少设置 top, right, bottom, left中的一个

  • 如果同时指定 top 和 bottom(非 auto),优先采用 top

  • 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用 right

浏览器支持 
OS 6+ and Safari 6.1+ 
Firefox 32+ 
chrome 56 Beta

原文地址:https://www.cnblogs.com/zrbfree/p/6379421.html