您的位置:时时app平台注册网站 > web前端 > 运用 position:sticky 达成粘性布局【彩世界网址】

运用 position:sticky 达成粘性布局【彩世界网址】

2019-10-12 18:39

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

任选一种支付办法

彩世界网址 1 彩世界网址 2

2 赞 4 收藏 评论

运用 position:sticky 实现底部导航栏固定

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

彩世界网址 3

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

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

不明朗的兼容性

在呈报具体示例此前,依旧很有不可或缺精晓一下 position:sticky 的包容性,嗯,不明朗的兼容性。

看看 CANIUSE 下的截图:

彩世界网址 4

SHIT,这么好的习性帮衬性居然那样劳碌。

彩世界网址 5

IOS 家族(SAFA大切诺基I && IOS SAFARI)和 Firefox 很早带头就扶助 position:sticky 了。而 Chrome53~55 则须要启用实验性网络平台成效才行。个中 webkit 内核的要增添上私有前缀 -webkit-

假诺问,CSS 中 position 属性的取值有多少个?
大部人的回答是,大致是底下那多少个吗?

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

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

彩世界网址 6

所以下边包车型地铁 CodePen 示例,须要上述多少个浏览器下见到。

生效法规

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;

彩世界网址 7

position:sticky 示例

哦,上面包车型客车文字描述估量照旧很难精通,看看上面这张 GIF 图,想想要贯彻的话,使用 JS CSS 的形式该如何做:

彩世界网址 8

遵照常规做法,大致是监听页面 scroll 事件,判定每一区块间距视口最上端间隔,超越了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则能够特别有扶植的兑现(请在 SAFARI 大概 CHROME53 下见到):

嗯,看看上面包车型客车CSS 代码,只必要给每种内容区块加上

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

就足以轻易完成了。

简易描述下生效进度,因为设定的阈值是 top:0 ,那几个值表示当元素间距页面视口(Viewport,也正是fixed定位的参阅)最上端间距超过0px 时,元素以 relative 定位展现,而当成分间距页面视口小于 0px 时,成分表现为 fixed 定位,也就能固定在最上端。

不领悟能够再看看上边这两张暗示图(top:20px 的景况,取自开源项目fixed-sticky):

生效法则

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:fixed;

彩世界网址 9

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

彩世界网址 10

始发应用?

上边从宽容性也看见了,意况不容乐观,然而用于有个别布局仍是能够省非常多力的,假诺的确希望用上那个性情,能够选用局地开源库来完成包容。

推荐 fixed-sticky 。

看不尽 CSS 小说汇总在本身的 Github 。

到此本文甘休,假如还会有哪些疑点依然建议,能够多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

打赏支持作者写出更加多好小说,感激!

打赏作者

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.

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

始发运用?

地点从包容性也见到了,景况不容乐观,不过用于有个别布局仍可以省比相当多力的,假若确实愿意用上那个本性,可以动用部分开源库来促成包容。

推荐 fixed-sticky 。

 

名目多数 CSS 小说汇总在自家的 Github 。

到此本文停止,若是还应该有怎么着疑点照旧提出,能够多多交换,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

关于笔者:chokcoco

彩世界网址 13

经不住流年似水,逃可是此间少年。 个人主页 · 小编的小说 · 63 ·    

彩世界网址 14

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

彩世界网址 15

初窥 position:sticky

sticky 希伯来语字面意思是粘,粘贴,所以姑且称之为粘性定位。下边就来打探下这一个地处实验性的取值的切实可行成效及实用场景。

那是多个组合了 position:relative 和 position:fixed 二种固定作用于一体的非常定位,适用于部分异样现象。

怎么样是构成三种永久成效于一体呢?

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

而后,成分定位展现为在当先特定阈值前为相对牢固,之后为定位定位。

本条一定阈值指的是 top, right, bottom 或 left 之一,换言之,钦点 top, right, bottom 或 left 几个阈值个中之一,才可使粘性定位生效。不然其作为与相对固化同样。

卧槽,什么来的?

选取 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;
}

卧槽,什么来的?

彩世界网址 16

前端发展太快,新东西目接不暇,可是对于好玩的事物,还是忍不住一探毕竟。(只怪当初…)

 

position:sticky 示例

啊,上面包车型客车文字描述推断依然很难驾驭,看看下边那张 GIF 图,想想要兑现的话,使用 JS CSS 的点子该如何是好:

彩世界网址 17

遵照正规做法,大约是监听页面 scroll 事件,决断每一区块间隔视口最上端间隔,超过了则设定该区块 position:fixed,反之去掉。

而使用 position:sticky ,则足以充足有助于的兑现(请在 SAFATiguanI 可能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 的包容性,嗯,不乐观的包容性。

看看 CANIUSE 下的截图:

彩世界网址 18

SHIT,这么好的性情辅助性居然这么勤奋。

彩世界网址 19

IOS 家族(SAFA逍客I && IOS SAFA奥迪Q5I)和 Firefox 很早开头就辅助 position:sticky 了。而 Chrome53~55 则须要启用实验性网络平台作用才行。此中 webkit 内核的要增多上私有前缀 -webkit-

没了吗?一时发现其实还会有三个远在实验性的取值,position:sticky(戳笔者查看MDN解释):

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

额,其实,我们还是能够有这3 个取值:

前端发展太快,新东西目接不暇,不过对于风趣的东西,依旧不由自己作主一探终究。(只怪当初...)

 

初窥 position:sticky

sticky 俄文字面意思是粘,粘贴,所以姑且称之为粘性定位。上边就来询问下那么些地处实验性的取值的具体效果及实用场景。

那是一个组合了 position:relative 和 position:fixed 三种永世成效于一体的奇特定位,适用于一些奇特现象。

怎样是构成二种永世功用于一体呢?

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

而后,成分定位表现为在抢先特定阈值前为绝对固定,之后为定位定位。

本条一定阈值指的是 top, right, bottom 或 left 之一,换言之,钦命 top, right, bottom 或 left 八个阈值此中之一,才可使粘性定位生效。不然其作为与相对稳固一样。

 

彩世界网址 20

{
    position: sticky;
}

 

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

本文由时时app平台注册网站发布于web前端,转载请注明出处:运用 position:sticky 达成粘性布局【彩世界网址】

关键词: