【前端基础系列】CSS篇-带你了解position:sticky

如果问,CSS 中 position 属性的取值有几个?大部分人的回答大概是 staticrelativeabsolutefixed,实际上MDN上还有一个 sticky

今天我们就来给大家介绍这个容易被忽视的position属性值 sticky

先来看看MDN上对于 sticky 的介绍:

粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。

粘性定位可以被认为是相对定位和固定定位的混合。

什么是结合两种定位功能于一体呢?

元素在跨越特定阈值前为相对定位,之后为固定定位。

也就是元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)containing block(最近的块级祖先元素)定位。

元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。

这个特定阈值指的是 top、right、bottom 或 left 之一,换言之,指定 top、right、bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

示例

上面的文字描述估计还是很难理解,看看下面这张 GIF 图,想想要实现的话,使用 JS + CSS 的方式该如何做:

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

而使用 position:sticky ,则可以非常方便的实现:

<div class="container">
    <div class="sticky-box">内容1</div>
    <div class="sticky-box">内容2</div>
    <div class="sticky-box">内容3</div>
    <div class="sticky-box">内容4</div>
</div>

.container {
    background: #eee;
    width: 600px;
    height: 1000px;
    margin: 0 auto;
}

.sticky-box {
    position: sticky;
    height: 60px;
    margin-bottom: 30px;
    background: #ff7300;
    top: 0px;
}

div {
    font-size: 30px;
    text-align: center;
    color: #fff;
    line-height: 60px;
}

看看上面的 CSS 代码,只是给每个内容区块加上

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

就可以轻松实现了。

简单描述下生效过程,因为设定的阈值是 top:0 ,这个值表示当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部。

不理解可以再看看下面这两张示意图(top:20px 的情况):

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

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

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

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

<div class="container">
    <nav>我是导航栏</nav>
    <div class="content">
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
        <p>我是内容栏</p>
    </div>
</div>

.container {
    background: #eee;
    width: 600px;
    height: 1000px;
    margin: 0 auto;
}

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

}

nav {
    height: 50px;
    background: #999;
    color: #fff;
    font-size: 30px;
    line-height: 50px;
}

.content {
    margin-top: 30px;
    background: #ddd;
}

p {
    line-height: 40px;
    font-size: 20px;
}

同理,也可以实现侧边导航栏的超出固定。

生效规则

position:sticky 的生效是有一定的限制的,总结如下:

  • 须指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。

  • top 和 bottom 同时设置时,top 生效的优先级高,left 和 right 同时设置时,left 的优先级高。

  • 设定为 position:sticky 元素的任意父节点的 overflow 属性必须是 visible,否则 position:sticky 不会生效。这里需要解释一下:
    • 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky 元素也不会有滚动然后固定的情况。

    • 如果 position:sticky 元素的任意父节点定位设置为 position:relative | absolute | fixed,则元素相对父元素进行定位,而不会相对 viewprot 定位。

  • 达到设定的阀值。这个还算好理解,也就是设定了 position:sticky 的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。

兼容性

从上面的兼容性可以看到,在主流的浏览器中已经可以正常使用。

  • 21
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 对于 overflow-x: auto 与 position: sticky;的冲突,一般情况下,overflow-x: auto 会覆盖掉 position: sticky;,但是可以通过设置 position: -webkit-sticky 来解决这个冲突。 ### 回答2: 当使用`overflow-x: auto;`属性时,元素会生成一个具有水平滚动条的容器。这意味着当内容超过容器的宽度时,用户可以通过滚动条水平滚动来查看隐藏的内容。而`position: sticky;`属性则允许元素在滚动过程中保持在其指定位置上。 然而,这两个属性之间存在冲突。当应用了`overflow-x: auto;`属性并且包含的内容超过了容器的宽度时,滚动条将显示。而滚动过程中,`position: sticky;`属性会尝试将元素保持在指定位置,但由于滚动条的存在,元素的位置可能会发生偏移。 具体而言,当滚动开始时,元素可能会因为滚动条的出现而稍稍向左偏移,以给滚动条腾出空间。这种偏移可能会导致元素在滚动过程中闪烁或产生奇怪的效果。 为了解决这个冲突,可以考虑以下解决方案: 1. 调整`overflow-x`的值:将`overflow-x`属性从`auto`改为`hidden`,这会隐藏水平滚动条,从而避免了冲突。 2. 使用JavaScript处理滚动:通过编写JavaScript代码,可以自定义滚动行为,实现滚动时元素保持在指定位置。 3. 对元素进行特殊处理:使用额外的CSS样式或工具库来处理具有`overflow-x`和`position: sticky`属性的元素间的冲突,以确保它们能够正确地显示和滚动。 根据具体的情况和需求,可以选择适合的解决方案来解决`overflow-x: auto;`和`position: sticky;`之间的冲突。 ### 回答3: overflow-x: auto与position: sticky;之间存在冲突,是因为它们在对元素进行定位时的机制不同。 overflow-x: auto是用于设置元素在水平方向上溢出内容时的处理方式。设置为auto时,如果元素内容超出了容器的宽度,会出现滚动条以便于查看全部内容。这种情况下,元素的位置是相对于容器而言的,如果设置了position: sticky;,粘性定位的效果会失效。 而position: sticky;是一种相对于滚动容器(即其祖级元素中的第一个具有滚动机制的父级元素)进行定位的方式。当元素的位置离开了视窗时,它会固定在容器的顶部或底部,直到滚动容器回到元素原本的位置。这种情况下,元素的位置是相对于滚动容器而言的。 当同时应用overflow-x: auto和position: sticky;时,由于二者的定位方式不同,会发生冲突。滚动容器会优先考虑设置为position: sticky;的元素在垂直方向上的定位,而不会考虑水平方向上的滚动溢出。 如果需要同时使用这两个属性,可以考虑修改布局和定位方式,或使用JavaScript等技术来实现相同的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Web面试那些事儿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值