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

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

2024-06-18 09:06:51 前端知识 前端哥 127 181 我要收藏

如果问,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 是根据元素是否达到设定了的阈值决定的。

兼容性

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/12594.html
标签
评论
发布的文章

jQuery基本使用

2024-06-24 02:06:16

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!