Position Sticky 的一些妙用

Position Sticky 的一些妙用 1

其实说是妙用,不过是我发现 Sticky 能应用在页面实现一些功能,小细节锦上添花罢了。

什么是 Position Sticky

元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottom, 和 left的值进行偏移。偏移值不会影响任何其他元素的位置。

粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位,之后为固定定位。

MDN Web Docs

前几天给 <pre> 添加了个 highlight.js , 目的是想让里面的代码能有一些想 IDE 那样一些关键字词的一些颜色标识。

Position Sticky 的一些妙用 2
也就是这样的颜色标识美化

highlight.js 给每行代码都添加行数标识,就在昨天发现代码如果太长的话就会进行换行处理,于是我给 <pre> 里面的 <code> 添加了 white-space: pre ,目的是为了能让代码能像我格式化时那样显示,不要在空白处给我断行,我主动换行才换行。

虽然现在能按照我显示,但如果这样的话,一行代码太长的话且包含容器比较窄的时候将会出现水平滚动条,而且滑动的时候将把行数给隐藏在包含快外。

这里面就个问题:

  • 看起来不方便,一行代码无所谓,超过多行将很乱
  • 假如里面的内容不够严谨且出现问题的地方刚好被滑动隐藏,那么有访客指出出现问题行数,将会很麻烦,不能一眼看出问题,需要往回滚,这无疑增加了成本。

然后我脑海里第一时间想到定位: 把它固定着不让它跑,顺其自然想到 position : fixed,但没几秒我又转回来了,fixed 虽然能固定,但它的只能相对屏幕视口,如果给行 Number 设置了 Fixed 没方向偏移值 top right bottom left 设置,那么全部行数都不知道跑哪了,这还看个鸟啊。

于是又想到 CSS3 新增的 sticky ,只怪自己用得少,使用频率没其他那几个属性值高,一下子想不到。

<div id="home-profile-card">
    <div class="box">
        <header>
            <div class="avatar bgCover" style="background-image: url(https://fongsoul-1252667212.image.myqcloud.com/_s/2021/05/e4142cc4.jpg?imageMogr2/thumbnail/750x/format/webp/interlace/1/quality/50)">
                <div class="info">
                    <div class="ab-uline" itemscope=""> HALO <br> I'M <span translate="no" itemprop="name">FONG.</span></div>
                    <div class="h6 highlight text-blod"> <span style="font-size: 16px;"><img loading="lazy" draggable="false" role="img" class="emoji" alt="" src="//fongsoul.com/_s/china.svg" width="21"></span> from Canton</div>
                </div>
            </div>
            <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
                <path id="gentle-wave" d="M-70 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" fill="#fff"></path>
            </svg>
        </header>
        <div style="margin-top: -20px"> <b class="h5 ab-uline">About</b> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
            <div class="desc font-source-han-serif">
                <div> 来自岭南广州府,这曾是古南越国国都,如今亦是一座迷人的城市。</div>
                <p>站点主要撰写个人生活点滴,亦包括不限于编程、烹饪、摄影等半桶水手艺杂文。</p>
                <a href="javascript:;" class="button" onclick="alert('这么想深入了解的吗 (≧◇≦)')" style="font-family: PingFangSC, PingFangSC-Regular, 'Microsoft YaHei'">了解更多</a>
            </div>
        </div>
    </div>
</div>

在一段老长老长的代码,包含盒子还很窄的情况下,用您的芊芊玉手往左水平滑动,行数始终在那个位置。

从开头 MDN 处说明不难看出 sticky 就是 relativefixed 的结合体,当 sticky 元素设置了方向偏移值,该元素距离最近可滚动祖先元素(overflow 是 visible,如果没有,则是浏览器视窗盒子)可视区域边缘大于偏移值时,sticky 元素就是 relative 特性,否则距离可视区域边缘等于偏移值时 sticky 元素就是 fixed 特性,像狗皮膏药那样粘着。

Position: sticky 的一些细节

sticky 虽然看着有 Fixed 的特性,但它始终会被它的父级元素限制住, 与 fixed 的差别是,fixed 是有点齐天大圣的味道,偏移值一上来就是相对于根元素,父元素对他不起作用,Fixed 父元素完全滑出了可视区域,Fixed 依然在那固定的偏移位置。

sticky 虽然粘在可滚动祖先元素内偏移距离,但只要 sticky 元素与父元素的边缘发生重合,sticky 就不会再粘住,从而切换回 relative 特性。

什么情况下会失效:

  • 当其父元素高度与子 Sticky 元素尺寸一致时,会失效,因为发生重合且没有空间运动,不会粘住。
  • 必须设定为 Sticky 设定方向偏移值,不然不知道往哪偏。
  • 设定为 Sticky 的元素的任意父节点的 overflow 属性必须是 visible,否则将抑制 sticky 元素行为,如父元素是 overflow: hidden ,它不再代用滚动的特性,当 sticky 元素粘附在 hidden 父元素时,父元素也跟着移动,导致 sticky 元素也跟着移动。

在 Flex 弹性盒子

之前发现 Flex 主轴水平布局下 Sticky 元素发生失效,以为不是正常流模型导致,经检测发现,是因为 Flex 弹性布局子项 交叉轴对其属性 align-self 默认是 stretch,即是两侧等高同于父元素,按照上面失效细节的第一个得出,sticky 没活动空间导致失效,需设置为 flex-start 或其他对其方式修复其自身高度,使其高度呈现包裹特性。

今天是 520,竟然在 Unsplash 上找到这张 Sticky 图,还是文案还是 LOVE,这真是巧极了。

最后感觉写得有点乱。

交流,但不求共鸣

    我要留言

    Tips: 支持匿名免邮留言。填写邮箱地址有利于对各位靓仔/靓女进行消息通知。留言头像服务来自Gravatar

    留言者基本信息 匿名訪客
    匿名訪客
    留言主要内容
    Sticker Heo on wordpress, Get !!!!
    Kaomojis 颜字

    Σ(っ °Д °;)っ  惊吓w(゚Д゚)w  啊啊(°ཀ°)  吐血(⊙﹏⊙)  呃呃呃o(≧口≦)o  崩溃(´•︵•`)  难过(;´༎ຶД༎ຶ`)  哭死→_→  斜眼看( ̄_, ̄ )  不屑( *︾▽︾)  陶醉(* ̄3 ̄)╭  飞吻o( ̄┰ ̄*)ゞ  不好意思(。・_・。)ノ  对不起φ(≧ω≦*)♪  乐(*^▽^*)  开心(๑╹◡╹)ノ  高兴*´∀`)´∀`)*´∀`)*´∀`)  哈哈哈哈ヽ(✿゚▽゚)ノ  好耶(๑•̀ㅂ•́)و✧  棒Ψ( ̄∀ ̄)Ψ  美味

    验证码加载中....

    BACK TO TOP