一个很厉害的属性——sticky

最新推荐文章于 2025-02-20 11:19:26 发布
原创 最新推荐文章于 2025-02-20 11:19:26 发布 · 419 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

博客介绍了position:sticky的重要特性，即其效果完全受制于父级元素，这与position:fixed定位有根本不同，fixed元素直抵页面根元素，其他父元素无法限制其left/top定位。

position:sticky有个非常重要的特性，那就是sticky元素效果完全受制于父级元素们。
这和position:fixed定位有着根本性的不同，fixed元素直抵页面根元素，其他父元素对其left/top定位无法限制。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .daohang {
        width: 100%;
        height: 100px;
        position: sticky;
        top: 0;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div>
      <div>我是标题</div>
      <h1 class="daohang">孙悟空</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h1 class="daohang">猪八戒</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h1 class="daohang">唐僧</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>

      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
    </div>
  </body>
</html>
高shan仰止
关注
position:sticky 的 polyfill——stickyfill 源码浅析
weixin_33857679的博客
03-12 1288
本人最近在修改 blogsue 中的样式时，使用到了 position: sticky。话不多说，开始主要内容。 定义 position: sticky 是 CSS position 属性的一个新值。正如它的名字那样，它会“黏在”你的浏览器窗口中。这个展示方式有很多的应用场景。例如知乎的右侧就是这样一个场景：当用户一直往下翻的时候右侧的专栏（广告）固定住，不会消失在用户界面。又例如手机端的美团，上...
粘性定位（position:sticky）——微信小程序学习笔记
xiaopei_yan的博客
04-10 888
CSS 中的粘性定位（Sticky positioning）是一种特殊的定位方式，它可以使元素在滚动时保持在视窗的特定位置，类似于相对定位（relative），但当页面滚动到元素的位置时，它会表现得像固定定位（fixed）。这种定位方式特别适用于导航栏、侧边栏等需要在页面滚动时保持在特定位置的元素。fixed固定定位。
sticky 属性
歪脖先生的博客
01-19 1060
sticky 属性 与y修饰符相匹配，ES6 的正则对象多了sticky属性，表示是否设置了y修饰符。 var r = /hello\d/y;r.sticky // true
sticky属性
weixin_30920853的博客
05-14 177
忘记说了，position 还有一个 「sticky」 属性值，不是「static」哦！该属性值类似 relative 和 fixed 的合体，当元素在视口内的时候表现类似relative，当滚动后元素移出视口就会固定在那里，类似fixed。目前Chrome 23.0.1247.0 开始支持，W3C讨论：http://t.cn/zTrkHq2，Demo：http://t.cn/zWeN...
css中的sticky属性
xiangyizhixuexi的博客
07-14 5759
position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 使用： #sticky-nav { position : sticky ; top : 100px ; } 设置position:sticky同时给一个(top,botto
sticky属性解释一下？
weixin_43912756的博客
08-19 689
positin:sticky是一个新的CSS3属性，它的表现类似于position:relative和position:fixed的合体，在目标区域在屏幕中可见时，它的行为就像是position:relative一样。而当页面滚动超出区域时，它的行为就像是position:fixed一样，固定在目标位置。它可以设置top，left，right，bottom，默认设置只有没有任何变化。譬如当你设置top:0，当这个元素距离上为0时，就变成了固定定位。 ...
position的属性(sticky属性)
ganlubaba666的博客
03-24 3327
position的属性对position所有的属性的介绍sticky属性定义demosticky生效以及失效fixed属性定义demoabsolute属性定义relative属性定义demo 对position所有的属性的介绍 https://developer.mozilla.org/zh-CN/docs/Web/CSS/position sticky属性 定义 粘性定位元素（stickily ...
详解CSS中position属性介绍(新增sticky)
09-22
在CSS布局中，`position`属性是一个至关重要的概念，它决定了元素在页面上的定位方式。本文将详细解析CSS中的`position`属性，并特别关注CSS3新增的`sticky`值。 首先，`position`属性的基本用法是设定元素的定位...
Android四大组件——BroadcastReceiver普通广播、有序广播、拦截广播、本地广播、Sticky广播、系统广播
11-26
在有序广播中，如果一个Receiver处理了广播并设置了`resultCode`和`resultData`，那么后续的Receiver可以获取到这些结果，这使得前一个Receiver有机会“拦截”广播并决定是否继续传递。如果前一个Receiver返回`...
CSS学习笔记七——定位属性
weixin_43328954的博客
01-29 1188
定位属性 position 属性是定位属性，可让某个元素显示在某个位置。 其取值有：static、absolute、relative、fixed 和 sticky。 1. static 静态定位（默认值） 按照文档流顺序，从左到右、从上到下，与元素显示类型有关； 不支持 top、left、right、bottom； 2. relative 相对定位 相对自己原来的位置移动； 不脱离文档流，仍然占据文档流位置，下一元素不会顶上来； 可以覆盖在其它元素上；
position: sticky 属性
文摘资讯
11-13 387
关于 position 属性主要有五个值：static relative fixed absolute sticky常见的就是 relative 和 absolute 这两个属性。relative 表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。absolute 表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。比较复杂的是 sticky 属性。...
CSS position属性sticky
weixin_44384273的博客
02-19 2087
position:sticky
前端css基础篇——position中能实现动态效果的sticky属性
weixin_44542562的博客
07-14 3146
position:sticky（粘性定位）简介 sticky是position属性中新添的一个属性，它可以说是fixed和relative的结合。它主要作用在scroll的监听上，在滚动过程中，当某元素的距离其父元素的距离达到设定的sticky值的时候，这时position：sticky的作用就相当于fixed固定定位，固定在适当的位置，不随滚动条的滚动而发生变化。 使用条件 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性； 必须制定 top、bottom
position新增的css3属性之sticky
weixin_30847939的博客
08-31 212
sticky是粘的意思，在css 中的表现为吸附。 常见吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合 吸顶的效果我们之前的做法是：在页面打开的时设置position为relative 的，向下滑动的时将position设置为 fixed 并且 top：0 这种处理方案用过的人会知道，会出现跳块的问题，需要垫东西。 现在有了sticky属性，很简单...
sticky -- position定位属性sticky值之粘性定位；
weixin_34104341的博客
03-12 196
　　sticky简述 sticky 是css定为新增的属性；可以说是相对定位relative和固定定位fixed的结合； 它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位要求时； position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。 使用条件： 1. 父元素不能设置 o...
CSS属性 sticky 粘性定位：固定导航
(黎子)人生编码
06-17 1400
position: sticky属性让元素根据用户的滚动位置相对页面视口固定，即使它的父元素不是固定定位的。
详细讲解 position: sticky属性
楠姐的博客
02-20 1150
适用场景：需要元素在滚动时动态固定（如导航栏、表格标题、侧边栏）。关键规则：明确设置阈值方向，确保父容器有滚动空间。优势：无需 JavaScript 即可实现滚动交互，代码简洁高效。合理使用可以显著提升用户体验，但需注意浏览器兼容性和性能影响。
文件的 SUID 、SGID 、Sticky属性
Gino的专栏
05-02 1429
SUID 属性 SUID属性一般用在可执行文件上，当用户执行该文件时，会临时拥有该执行文件的所有者权限。使用”ls -l” 或者”ll” 命令浏览文件时，如果可执行文件所有者权限的第三位是一个小写的”s”，就表明该执行文件拥有SUID属性。比如/usr/bin/passwd文件。$ ll /usr/bin/passwd -rwsr-xr-x 1 root root 41284 4月
吸顶效果：1.css属性sticky优缺点 2.简单js实现吸顶效果
qq_43682422的博客
10-10 3151
document.documentElement.scrollTop 有些移动端不支持，导致无法获取正确的滚动高度，使用document.body.scrollTop移动端也能正常获取，兼容一下）（小细节：offsetTop计算的是当前元素距离父元素顶部的高度，多层嵌套则需要递归叠加offsetTop，所以建议是选取最外面的那层元素，则可以直接获取距离窗口的高度）当页面滚动高度超过元素距离窗口的高度，设置为fixed，且top为0（当然bottom也可以，数值随便设）1）计算元素距离窗口的高度。
认为相对定位会脱离文档流 —— 错！只有 absolute、fixed、sticky 才会脱离或部分脱离
最新发布
10-28
这句话是正确的，我们来详细解释一下： ### ✅ 正确认知：**相对定位（`position: relative`）不会脱离文档流** 当一个元素设置为 `position: relative` 时，它仍然保留在正常的文档流中。这意味着： - 它原来占据的空间依然被保留； - 其他元素会像它没有移动一样进行布局； - 即使通过 `top`、`left` 等属性将它视觉上“移走”，其原始位置不会被释放。 --- ### 🔁 对比：脱离文档流的含义 所谓“脱离文档流”，指的是该元素不再参与普通内容的排版流程，其他元素可能会填补它的位置或忽略它的存在。 | 定位方式 | 是否脱离文档流 | 特点 | |--------|----------------|------| | `static` | 否 | 默认值，正常文档流 | | `relative` | ❌ 否 | 偏移基于自身原位置，仍占空间 | | `absolute` | ✅ 是 | 脱离文档流，相对于最近的定位祖先定位 | | `fixed` | ✅ 是 | 脱离文档流，相对于视口定位 | | `sticky` | ⚠️ 部分脱离 | 在触发条件前在文档流中，触发后表现如 fixed | --- ### 🧪 示例代码对比说明 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>定位对比</title> <style> .container { margin: 20px; } .box { width: 100px; height: 100px; margin: 10px; display: inline-block; background: lightblue; text-align: center; line-height: 100px; } .relative-box { position: relative; top: 50px; left: 50px; background: coral; } .absolute-box { position: absolute; top: 50px; left: 50px; background: red; } </style> </head> <body> <div class="container"> <h3>场景一：relative —— 不脱离文档流</h3> <div class="box">Box 1</div> <div class="box relative-box">Relative</div> <div class="box">Box 3</div> <!-- 注意 Box 3 的位置不受 Relative 移动影响 --> </div> <div class="container"> <h3>场景二：absolute —— 脱离文档流</h3> <div class="box">Box A</div> <div class="box absolute-box">Absolute</div> <div class="box">Box C</div> <!-- Absolute 元素消失于布局流中，Box C 紧贴 Box A --> </div> </body> </html> ``` ### 🔍 解释： - **`.relative-box`**：虽然向右下偏移了，但它原本的位置仍然“占着”，所以第三个蓝色盒子（Box 3）不会上移。 - **`.absolute-box`**：完全脱离文档流，不占据任何空间，因此后面的 Box C 直接紧挨着 Box A 排列，仿佛 Absolute 元素不存在于布局中。 --- ### 💡 小结 > ✅ 只有 `position: absolute`、`position: fixed` 和 `position: sticky`（在粘住状态下）会导致元素脱离或部分脱离文档流。 > ❌ `position: relative` 只是视觉上的偏移，不影响布局结构。 这也是为什么我们在使用绝对定位子元素时，常常给父容器加上 `position: relative` —— 为了让这个父容器成为一个“参考点”，同时又不破坏页面布局。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值