直情径行粘性布局

使用 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
英文字面意思是粘,粘贴,所以姑且称之为粘性定位。上面就来驾驭下这么些地处实验性的取值的切切实实效果及实用场景。

那是1个结缘了 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本田UR-VI && IOS SAFARubiconI)和 Firefox
很早先导就帮衬 position:sticky 了。而 Chrome53~55
则必要启用实验性网络平台效率才行。其中 webkit
内核的要添加上私有前缀 -webkit-

额,其实,我们还是可以有这3 个取值:

初窥 position:sticky

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

那是两个结合了 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 ,则可以十一分便于的落到实处(请在 SAFALacrosseI 可能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解释):

不明朗的包容性

在讲述具体示例以前,依旧很有须求精通一下 position:sticky 的兼容性,嗯,不明朗的包容性。

看望 CANIUSE 下的截图:

澳门葡京 7

SHIT,这么好的习性协理性居然这么坚苦。

澳门葡京 8

IOS 家族(SAFA奥迪Q7I && IOS SAFA景逸SUVI)和 Firefox
很起头导就协理 position:sticky 了。而 Chrome53~55
则需求启用实验性互联网平台功用才行。其中 webkit
内核的要添加上私有前缀 -webkit-

没了吗?偶然发现其实还有二个介乎实验性的取值,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 ,则可以非凡有利的兑现(请在 SAFALacrosseI 或者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
英文字面意思是粘,粘贴,所以姑且称之为粘性定位。上面就来打探下那几个地处实验性的取值的切实可行成效及实用场景。

那是一个组成了 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
家族(SAFASportageI && IOS SAFA奥迪Q7I)和 Firefox
很早开首就扶助 position:sticky 了。而 Chrome53~55
则须求启用实验性互联网平台功用才行。其中 webkit
内核的要添加上私有前缀 -webkit-

 

不开展的包容性

在叙述具体示例在此之前,依旧很有必不可少精晓一下 position:sticky 的包容性,嗯,不开展的包容性。

看看 CANIUSE 下的截图:

澳门葡京 25

SHIT,这么好的习性资助性居然如此艰辛。

澳门葡京 26

IOS
家族(SAFARAV4I && IOS SAFA奥迪Q5I)和 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 ,则足以丰富便于的兑现(请在
SAFATiggoI 大概 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 。

到此本文为止,假如还有哪些疑点照旧提议,能够多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

相关文章

发表评论

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

*
*
Website