百步穿杨粘性布局

应用 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 已毕粘性布局,positionsticky

若是问,CSS 中 position 属性的取值有多少个?
大部分人的对答是,大致是底下那多少个呢?

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

额,其实,我们还足以有那 3 个取值:

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

没了吗?偶然发现实际上还有三个地处实验性的取值,position:sticky(戳作者翻看MDN解释):

{
    position: sticky;
}

卧槽,什么来的?

美高梅开户网址 2

前者发展太快,新东西目接不暇,不过对于有趣的事物,仍旧不禁一商讨竟。(只怪当初…)

设若问,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: static;
    position: relative;
    position: absolute;
    position: fixed;
}

不明朗的兼容性

在讲述具体示例此前,依然很有必要精通一下 position:sticky 的包容性,嗯,不明朗的包容性。

看看 CANIUSE 下的截图:

美高梅开户网址 3

SHIT,这么好的品质扶助性居然这么坚苦。

美高梅开户网址 4

IOS 家族(SAFA奥迪Q3I && IOS SAFA宝马7系I)和 Firefox
很早起首就扶助 position:sticky 了。而 Chrome53~55
则需求启用实验性互联网平台效率才行。其中 webkit
内核的要添加上私有前缀 -webkit-

额,其实,大家仍是可以有那3 个取值:

初窥 position:sticky

sticky
英文字面意思是粘,粘贴,所以姑且称之为粘性定位。上边就来打探下那么些地处实验性的取值的求实职能及实用场景。

那是3个重组了 position:relative 和 position:fixed 三种固定功用于一体的独特定位,适用于一些独特意况。

何以是组成三种固定作用于一体呢?

要素先根据一般文档流定位,然后相对于该因素在流中的 flow root(BFC)和
containing block(近来的块级祖先成分)定位。

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

本条一定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top,
right, bottom 或 left
多个阈值其中之一,才可使粘性定位生效。否则其一举一动与绝对稳定相同。

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

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

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

美高梅开户网址 5

从而下边的 CodePen 示例,须要上述多少个浏览器下看到。

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

 

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

position:sticky 示例

嗯,上面的文字描述推断依旧很难领会,看看上面那张 GIF
图,想想要兑现的话,使用 JS + CSS 的方法该如何是好:

美高梅开户网址 6

绳趋尺步不奇怪做法,几乎是监听页面 scroll
事件,判断每一区块距离视口顶部距离,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则足以极度有利的贯彻(请在 SAFAEvoqueI 或然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):

没了吗?偶然发现实际还有3个高居实验性的取值,position:sticky(戳小编翻看MDN解释):

不明朗的包容性

在讲述具体示例从前,如故很有必不可少驾驭一下 position:sticky 的包容性,嗯,不明朗的包容性。

看望 CANIUSE 下的截图:

美高梅开户网址 7

SHIT,这么好的性质协助性居然那样辛苦。

美高梅开户网址 8

IOS 家族(SAFARI && IOS SAFA宝马X3I)和 Firefox
很早开首就帮衬 position:sticky 了。而 Chrome53~55
则须要启用实验性网络平台作用才行。其中 webkit
内核的要添加上私有前缀 -webkit-

没了吗?偶然发现实际还有1个介乎实验性的取值,position:sticky(戳我查看MDN解释):

离开页面顶部大于20px,表现为 position:relative;

美高梅开户网址 9

{
    position: sticky;
}

 

{
    position: sticky;
}

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

美高梅开户网址 10

卧槽,什么来的?

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

地方栏输入 chrome://flags/百步穿杨粘性布局。 ,找到 enable-experimental-web-platform-features ,采取启用:

美高梅开户网址 11

之所以上边的 CodePen 示例,要求上述多少个浏览器下看到。

 

卧槽,什么来的?

运用 position:sticky 达成底部导航栏固定

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

美高梅开户网址 12

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

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

同理,也落实侧边导航栏的压倒一定。

美高梅开户网址 13

position:sticky 示例

啊,下面的文字描述预计依旧很难了然,看看下边那张 GIF
图,想想要促成的话,使用 JS + CSS 的方法该如何是好:

美高梅开户网址 14

依照正规做法,大约是监听页面 scroll
事件,判断每一区块距离视口顶部距离,当先了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则足以十一分便宜的兑现(请在 SAFAEnclaveI 或然CHROME53+ 下看到):

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

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

就足以轻松完毕了。

简单易行描述下生效进度,因为设定的阈值是 top:0 ,这些值表示当成分距离页面视口(Viewport,约等于fixed定位的参阅)顶部离开当先0px 时,成分以 relative 定位表现,而当元素距离页面视口小于 0px
时,成分表现为 fixed 定位,也就会固定在顶部。

不明白可以再看看上边那两张示意图(top:20px
的处境,取自开源项目fixed-sticky):

美高梅开户网址 15

生效规则

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 是依照成分是或不是达到设定了的阈值决定的。

前者发展太快,新东西目接不暇,可是对于有趣的事物,如故不禁一探讨竟。(只怪当初…)

相差页面顶部大于20px,表现为 position:relative;

美高梅开户网址 16

前端发展太快,新东西目接不暇,不过对于有趣的事物,还是经不住一琢磨竟。(只怪当初…)

开班应用?

上边从包容性也看到了,意况不容乐观,可是用于有个别布局还可以省很多力的,假诺实在希望用上这特性格,可以行使局地开源库来落到实处包容。

推荐 fixed-sticky 。

星罗棋布 CSS 作品汇总在自己的 Github 。

到此本文截至,假诺还有何疑点依然提出,可以多多互换,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏辅助我写出越来越多好文章,多谢!

打赏小编

 

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

美高梅开户网址 17

 

打赏辅助作者写出更加多好作品,感谢!

任选一种支付办法

美高梅开户网址 18
美高梅开户网址 19

2 赞 4 收藏
评论

初窥 position:sticky

sticky
英文字面意思是粘,粘贴,所以姑且称之为粘性定位。上边就来询问下这一个地处实验性的取值的求实职能及实用场景。

那是2个结缘了 position:relative 和 position:fixed 三种永恒效用于一体的出色定位,适用于部分出奇情形。

什么样是整合三种固定功用于一体呢?

要素先依照平常文档流定位,然后相对于该因素在流中的
flow root(BFC)和 containing block(如今的块级祖先成分)定位。

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

那几个一定阈值指的是
top, right, bottom 或 left 之一,换言之,内定 top, right, bottom 或 left
七个阈值其中之一,才可使粘性定位生效。否则其一颦一笑与相对稳定相同。

 

初窥 position:sticky

sticky
英文字面意思是粘,粘贴,所以姑且称之为粘性定位。上边就来打探下这么些地处实验性的取值的切切实实效果及实用场景。

那是两个结合了 position:relative 和 position:fixed 三种固定功效于一体的非正规定位,适用于有个别万分现象。

哪些是组成二种固定成效于一体呢?

要素先依据平常文档流定位,然后相对于该因素在流中的
flow root(BFC)和 containing block(近日的块级祖先成分)定位。

而后,成分定位表现为在当先特定阈值前为相对稳定,之后为定点定位。

那几个一定阈值指的是
top, right, bottom 或 left 之一,换言之,内定 top, right, bottom 或 left
七个阈值其中之一,才可使粘性定位生效。否则其行为与相对固化相同。

至于小编:chokcoco

美高梅开户网址 20

经不住大运似水,逃不过此间少年。

个人主页 ·
小编的篇章 · 美高梅开户网址,
63 ·
   

美高梅开户网址 21

 

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

运用 position:sticky 完结导航栏固定,也是最普遍的用法:

美高梅开户网址 22

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

同理,也可以完毕侧边导航栏的当先一定。

 

不乐观的包容性

在描述具体示例以前,如故很有必不可少精晓一下 position:sticky 的包容性,嗯,不明朗的包容性。

看看 CANIUSE 下的截图:

美高梅开户网址 23

SHIT,这么好的性质协助性居然那样辛苦。

美高梅开户网址 24

IOS
家族(SAFA帕杰罗I && IOS SAFA君越I)和 Firefox
很开头始就协理 position:sticky 了。而 Chrome53~55
则需求启用实验性互连网平台成效才行。其中 webkit
内核的要添加上私有前缀 -webkit-

 

不乐观的包容性

在描述具体示例此前,如故很有须要通晓一下 position:sticky 的包容性,嗯,不乐观的包容性。

看看 CANIUSE 下的截图:

美高梅开户网址 25

SHIT,这么好的属性帮助性居然那样劳苦。

美高梅开户网址 26

IOS
家族(SAFA福特ExplorerI && IOS SAFALacrosseI)和 Firefox
很起初导就帮忙 position:sticky 了。而 Chrome53~55
则要求启用实验性网络平台功用才行。其中 webkit
内核的要添加上私有前缀 -webkit-

 

生效规则

position:sticky 的生效是有必然的限制的,总括如下:

 

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

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

美高梅开户网址 27

于是下边的
CodePen 示例,要求上述多少个浏览器下看看。

 

 

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

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

美高梅开户网址 28

故而下边的
CodePen 示例,须求上述多少个浏览器下看看。

 

position:sticky 示例

啊,下边的文字描述揣摸如故很难领悟,看看上面那张
GIF 图,想想要兑现的话,使用 JS + CSS 的方法该如何做:

美高梅开户网址 29

按照正规做法,几乎是监听页面
scroll
事件,判断每一区块距离视口顶部距离,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则足以十分便于的贯彻(请在
SAFARubiconI 或然 CHROME53+ 下看看):

哦,看看下面的
CSS 代码,只需要给种种内容区块加上

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

就可以轻松完成了。

简单描述下生效进度,因为设定的阈值是 top:0 ,那些值表示当成分距离页面视口(Viewport,也等于fixed定位的参阅)顶部距离超越0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px
时,元素表现为 fixed 定位,也就会固定在顶部。

不清楚可以再看看上面那两张示意图(top:20px
的情景,取自开源项目fixed-sticky):

始发运用?

地点从包容性也见到了,景况不容乐观,可是用于有个别布局还是可以省很多力的,即使确实愿意用上那天本性,可以动用部分开源库来落成包容。

推荐 fixed-sticky 。

 

一体系 CSS 小说汇总在本身的 Github 。

到此本文截止,假如还有怎样难题如故提议,可以多多沟通,原创文章,文笔有限,才疏学浅,文中若有不正之处,万望告知。

position:sticky 完结粘性布局,positionsticky
借使问,CSS 中 position 属性的取值有多少个?
大多数人的答疑是,大约是底下那多少个吗? { posi…

position:sticky 示例

哦,上边的文字描述预计依旧很难了然,看看上边那张
GIF 图,想想要完结的话,使用 JS + CSS 的不二法门该咋做:

美高梅开户网址 30

安分守己常规做法,大致是监听页面
scroll
事件,判断每一区块距离视口顶部距离,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则可以相当有利于的贯彻(请在
SAFAPRADOI 大概 CHROME53+ 下看看):

嗯,看看上边的
CSS 代码,只须求给逐个内容区块加上

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

就可以轻松落成了。

大致描述下生效进度,因为设定的阈值是 top:0 ,那么些值表示当元素距离页面视口(Viewport,相当于fixed定位的参阅)顶部距离当先0px 时,成分以 relative 定位表现,而当成分距离页面视口小于 0px
时,成分表现为 fixed 定位,也就会固定在顶部。

不晓得可以再看看上面那两张示意图(top:20px
的景况,取自开源项目fixed-sticky):

相差页面顶部大于20px,表现为 position:relative;

美高梅开户网址 31

距离页面顶部大于20px,表现为 position:relative;

美高梅开户网址 32

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

美高梅开户网址 33

离开页面顶部小于20px,表现为 position:fixed;

美高梅开户网址 34

 

 

运用 position:sticky 已毕底部导航栏固定

运用 position:sticky 达成导航栏固定,也是最常见的用法:

美高梅开户网址 35

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

同理,也可以兑现侧边导航栏的压倒一定。

运用 position:sticky 落成尾部导航栏固定

运用 position:sticky 落成导航栏固定,也是最普遍的用法:

美高梅开户网址 36

(请在
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 是根据成分是或不是达到设定了的阈值决定的。

生效规则

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 。

到此本文停止,若是还有啥样疑难依然提出,能够多多互换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

早先使用?

地点从包容性也看到了,景况不容乐观,然则用于有个别布局还是能省很多力的,假设的确希望用上那天性格,可以利用局地开源库来落到实处包容。

推荐 fixed-sticky 。

 

种种 CSS
小说汇总在本身的 Github 。

到此本文截至,假如还有哪些疑点依旧提议,可以多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图