落到实处粘性布局
分类:前端技术

动用 position:sticky 完成粘性布局

2017/02/16 · CSS · position, 布局

本文小编: 伯乐在线 - chokcoco 。未经笔者许可,防止转发!
应接插手伯乐在线 专辑编辑者。

若是问,CSS 中 position 属性的取值有多少个?
大许多人的对答是,大约是底下那么些呢?

{ position: static; position: relative; position: absolute; position: fixed; }

1
2
3
4
5
6
{
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
}

额,其实,大家还足以有这 3 个取值:

{ /* 全局值 */ position: inherit; position: initial; position: unset; }

1
2
3
4
5
6
{
    /* 全局值 */
    position: inherit;
    position: initial;
    position: unset;
}

没了吗?不常开掘其实还会有二个远在实验性的取值,position:sticky(戳作者翻看MDN解释):

{ position: sticky; }

1
2
3
{
    position: sticky;
}

卧槽,什么来的?

图片 1

前端发展太快,新东西目接不暇,可是对于风趣的东西,仍旧不由自己作主豆蔻梢头探终归。(只怪当初…卡塔 尔(阿拉伯语:قطر‎

纵然问,CSS 中 position 属性的取值有多少个?
大部人的应对是,差不离是上面那多少个呢?

初窥 position:sticky

sticky 克罗地亚语字面意思是粘,粘贴,所以姑且称之为粘性定位。上面就来询问下那一个地处实验性的取值的现时间效益果及实用处景。

那是二个构成了 position:relative 和 position:fixed 二种永世功效于意气风发体的例外定位,适用于一些破例现象。

何以是构成二种长久效用于大器晚成体呢?

要素先根据日常文书档案流定位,然后相对于该因素在流中的 flow root(BFC卡塔尔国和 containing block(这段日子的块级祖先成分卡塔尔定位。

而后,成分定位表现为在超越特定阈值前为相对稳固,之后为牢固定位。

那个一定阈值指的是 top, right, bottom 或 left 之风度翩翩,换言之,钦命 top, right, bottom 或 left 五个阈值个中之生龙活虎,才可使粘性定位生效。否则其一言一动与相对固定雷同。

{
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
}

不乐观的宽容性

在描述具体示例早先,依然很有需求理解一下 position:sticky 的宽容性,嗯,不乐观的包容性。

看看 CANIUSE 下的截图:

图片 2

SHIT,这么好的品质帮助性居然如此费劲。

图片 3

IOS 宗族(SAFA奥迪Q3I && IOS SAFA普拉多I卡塔尔国和 Firefox 很早初始就帮忙 position:sticky 了。而 Chrome53~55 则要求启用实验性网络平台功效才行。个中 webkit 内核的要增多上私有前缀 -webkit-

额,其实,大家还能有这3 个取值:

Chrome53~55 开启实验性互连网平台作用

地址栏输入 chrome://flags/ ,找到 enable-experimental-web-platform-features ,选用启用:

图片 4

就此上面包车型客车 CodePen 示例,须求上述多少个浏览器下观望。

{
    /* 全局值 */
    position: inherit;
    position: initial;
    position: unset;
}

position:sticky 示例

啊,上边的文字描述猜度依旧很难理解,看看下面那张 GIF 图,出主意要兑现的话,使用 JS CSS 的议程该如何做:

图片 5

依据正规做法,大约是监听页面 scroll 事件,判定每风流倜傥区块间隔视口顶上部分间距,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则足以丰硕平价的兑现(请在 SAFAWranglerI 只怕CHROME53 下看见卡塔 尔(阿拉伯语:قطر‎:

See the Pen positionSticky by Chokcoco (@Chokcoco) on CodePen.

哦,看看上面包车型地铁 CSS 代码,只供给给各类内容区块加上

{ position: -webkit-sticky; position: sticky; top: 0; }

1
2
3
4
5
{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

就能够轻便完结了。

简易描述下生效进度,因为设定的阈值是 top:0落到实处粘性布局。 ,这几个值表示当成分间距页面视口(Viewport,也正是fixed定位的参阅卡塔 尔(阿拉伯语:قطر‎顶端间距超越0px 时,成分以 relative 定位展现,而当成分间隔页面视口小于 0px 时,成分表现为 fixed 定位,也就能够稳定在顶上部分。

不亮堂能够再看看下边这两张暗暗表示图(top:20px 的情状,取自开源项目fixed-sticky):

没了吗?不常开采实际上还会有二个远在实验性的取值,position:sticky(戳笔者翻看MDN解释):

间距页面最上部大于20px,表现为 position:relative;

图片 6

{
    position: sticky;
}

相距页面最上部小于20px,表现为 position:fixed;

图片 7

卧槽,什么来的?

运用 position:sticky 完结底部导航栏固定

运用 position:sticky 实现导航栏固定,也是最经常见到的用法:

图片 8

(请在 SAFARI 或者 CHROME53 下观看):

See the Pen stickyNav by Chokcoco (@Chokcoco) on CodePen.

同理,也足以达成右侧导航栏的抢先一定。

图片 9

生效法规

position:sticky 的见到效果是有一定的范围的,总括如下:

  1. 须钦赐 top, right, bottom 或 left 多个阈值此中之生机勃勃,才可使粘性定位生效。不然其表现与相对固定相近。
    • 并且 top 和 bottom 同期设置时,top 生效的事先级高,left 和 right 同不平日候设置时,left 的先行级高。
  2. 设定为 position:sticky 成分的私行父节点的 overflow 属性必需是 visible,不然 position:sticky 不会一蹴而就。这里要求解释一下:
    • 如果 position:sticky 成分的放肆父节点定位装置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。
    • 如果 position:sticky 元素的妄动父节点定位装置为 position:relative | absolute | fixed,则成分相对父成分进行定点,而不会相对viewprot 定位。
  3. 直达设定的阀值。那一个还算好理解,也正是设定了 position:sticky 的要素表现为 relative 还是 fixed 是依靠元素是或不是达到规定的标准设定了的阈值决定的。

前端发展太快,新东西目接不暇,可是对于好玩的事物,仍然忍不住生龙活虎探毕竟。(只怪当初...卡塔尔国

起来选取?

上面从包容性也见到了,情形不容乐观,可是用于某个布局还是能够省超多力的,假诺的确愿意用上这几个天性,能够接收局地开源库来完成包容。

推荐 fixed-sticky 。

文山会海 CSS 小说汇总在自家的 Github 。

到此本文甘休,假若还会有什么样疑点依然提议,能够多多交换,原创小说,文笔有限,学疏才浅,文中若有不正之处,万望告知。

打赏扶植本人写出更加多好文章,多谢!

打赏作者

 

打赏扶持小编写出更加多好随笔,多谢!

任选大器晚成种支付办法

图片 10 图片 11

2 赞 4 收藏 评论

初窥 position:sticky

sticky 斯洛伐克共和国(The Slovak Republic卡塔 尔(英语:State of Qatar)语字面意思是粘,粘贴,所以姑且称之为粘性定位。下边就来打探下那么些地处实验性的取值的实际职能及实用处景。

那是二个结合了 position:relative 和 position:fixed 三种永世功用于豆蔻梢头体的特别定位,适用于某个异样情形。

怎么样是结合二种固定功效于风度翩翩体呢?

要素先依照普通文书档案流定位,然后相对于该因素在流中的 flow root(BFC卡塔 尔(阿拉伯语:قطر‎和 containing block(近些日子的块级祖先成分卡塔尔定位。

而后,成分定位表现为在超越特定阈值前为绝对固化,之后为稳固定位。

本条一定阈值指的是 top, right, bottom 或 left 之大器晚成,换言之,钦赐 top, right, bottom 或 left 八个阈值在那之中之大器晚成,才可使粘性定位生效。不然其一举一动与绝对牢固相符。

有关小编:chokcoco

图片 12

经不住光阴似箭,逃不过此间少年。 个人主页 · 笔者的篇章 · 63 ·    

图片 13

 

不乐观的包容性

在描述具体示例以前,如故很有要求领悟一下 position:sticky 的包容性,嗯,不乐观的包容性。

看看 CANIUSE 下的截图:

图片 14

SHIT,这么好的性质帮助性居然如此坚苦。

图片 15

IOS 亲族(SAFA传祺I && IOS SAFAHighlanderI卡塔尔和 Firefox 很在这里早先河就支持 position:sticky 了。而 Chrome53~55 则必要启用实验性互联网平台功用才行。个中 webkit 内核的要增添上私有前缀 -webkit-

 

Chrome53~55 开启实验性互连网平台成效

地点栏输入 chrome://flags/ ,找到 enable-experimental-web-platform-features ,采用启用:

图片 16

于是上边的CodePen 示例,供给上述多少个浏览器下看见。

 

position:sticky 示例

哦,上边的文字描述估算依旧很难精晓,看看上边那张 GIF 图,动脑筋要贯彻的话,使用 JS CSS 的点子该如何做:

图片 17

固守常规做法,大概是监听页面 scroll 事件,推断每生龙活虎区块间隔视口最上部间隔,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则能够非常便于的落到实处(请在 SAFACR-VI 或许 CHROME53 下看看卡塔 尔(阿拉伯语:قطر‎:

啊,看看上面的 CSS 代码,只须要给各个内容区块加上

{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

就能够轻巧达成了。

轻易描述下生效进程,因为设定的阈值是 top:0 ,这么些值表示当成分间距页面视口(Viewport,也正是fixed定位的参照他事他说加以考察卡塔尔顶上部分相差抢先0px 时,成分以 relative 定位表现,而当成分间隔页面视口小于 0px 时,元素表现为 fixed 定位,也就能够一定在顶上部分。

不明了可以再看看上面这两张暗意图(top:20px 的情况,取自开源项目fixed-sticky):

间距页面最上部大于20px,表现为 position:relative;

图片 18

相距页面顶上部分小于20px,表现为 position:fixed;

图片 19

 

运用 position:sticky 完结底部导航栏固定

运用 position:sticky 完成导航栏固定,也是最广泛的用法:

图片 20

(请在 SAFARI 或者 CHROME53 下观看):

同理,也足以兑现左侧导航栏的超过一定。

 

生效法规

position:sticky 的见到效果是有早晚的界定的,计算如下:

  1. 须内定 top, right, bottom 或 left 多个阈值当中之大器晚成,才可使粘性定位生效。不然其一举一动与相对牢固近似。

    • 并且 top 和 bottom 相同的时间安装时,top 生效的优先级高,left 和 right 同有的时候候安装时,left 的事先级高。
  2. 设定为 position:sticky 成分的人身自由父节点的 overflow 属性必得是 visible,不然 position:sticky 不会生效。这里必要解释一下:

    • 如果 position:sticky 成分的任性父节点定位装置为 overflow:hidden,则父容器不只怕张开滚动,所以 position:sticky 成分也不会有滚动然后固定的状态。
    • 如果 position:sticky 成分的任性父节点定位装置为 position:relative | absolute | fixed,则成分相对父成分进行固定,而不会相对viewprot 定位。
  3. 完成设定的阀值。这一个还算好精晓,约等于设定了 position:sticky 的因素表现为 relative 还是 fixed 是基于成分是还是不是达标设定了的阈值决定的。

 

千帆竞发接纳?

上面从兼容性也看出了,境况不容乐观,不过用于有个别布局仍是可以省比比较多力的,假诺实在希望用上那几个本性,能够行使局地开源库来兑现宽容。

推荐 fixed-sticky 。

 

漫天掩地 CSS 文章汇总在自己的 Github 。

到此本文结束,如若幸亏似何疑难照旧提议,能够多多沟通,原创作品,文笔有限,一无所知,文中若有不正的地方,万望告知。

本文由pc28.am发布于前端技术,转载请注明出处:落到实处粘性布局

上一篇:机制详细明白与,JavaScript运转搭乘飞机制 下一篇:没有了
猜你喜欢
热门排行
精彩图文