新发现一个好用的position:sticky属性

最新推荐文章于 2024-04-23 21:54:41 发布
最新推荐文章于 2024-04-23 21:54:41 发布
阅读量172 收藏
点赞数
分类专栏： css 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxwy_ing/article/details/122046384
版权

新发现一个好用的position:sticky属性

最近发现一个很有意思的css属性：position:sticky；
他不脱离文档流，可是当父容器发生滚动时，他会在原来位置固定，开始是relative的感觉，当发生滚动，又成了fixed。特别适合做吸顶效果。

position: sticky;
top:0;

需注意：top值必须有，当滚动到top值的时候，元素会固定。还需注意兼容性

cxwy_ing
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序吸顶两种方式，一种js,一种css (position: sticky； top: 0；)
hangGe0111的博客
08-10 1838
1.比较常用的方式，通过js获取当前元素距离顶部的高度，同时通过onPageScroll监听页面滚动的高度，对比二者的大小，通过fixed定位来实现置顶悬浮。（此方式需注意，不要一直setdata，不然会出现卡顿现象）。 1. wxml <view style="width: 100%; height: 300rpx; background: rgba(0,0,0,0.1); margin-top:30rpx;"></view> <view style="width: 1
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 7537
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
CSS：深入理解粘性定位 position: sticky
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
理解CSS中的sticky与fixed定位
nbsaas-boot基于Request-Response的企业级快速开发框架
04-23 623
在CSS中，和是两种常见的定位方式，它们可以让元素脱离文档流，并具有固定位置的效果。然而，它们在实际应用中有着不同的特点和使用场景。
position: sticky 详解（防坑指南）
热门推荐
包磊磊的博客
05-14 4万+
写这篇文章的原因是无论中文还是英文关于 sticky 的文章，只是说了 sticky 这个性感的 css 新特性可以拿来用，简单写一个 demo 完事，并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。 属性效果 sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底（移动端网站的头部返回栏，底部切换栏之类）的效果用这个属性非常适合。例如下图中的导航，也可以点链接看实际效果。 导航的效果更像是在页面打开的时候是 relative 的，向下滑动的
position:sticky；粘性布局
CodingNoob
12-06 2413
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
position:sticky实现表头固定
文摘资讯
02-10 1419
单词 sticky 的中文意思是“粘性的”，position:sticky 表现也符合这个粘性的表现。基本上，可以看出是 position:relative 和 position:fixe...
JS解决position:sticky的兼容性问题的方法
11-30
为了解决这个问题，我们可以采用JavaScript编写一个组件来模拟`position: sticky` 的效果，以确保在所有目标平台上的一致性。 首先，让我们理解`position: sticky` 的工作原理。它实际上是`relative` 和 `fixed` 两...
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
详解css粘性定位position：sticky问题采坑
12-14
使用`position: sticky`的正确语法是给元素设置`position: sticky`并配合`top`, `bottom`, `right`, 或 `left`中的一个属性。例如： ```css #sticky-nav { position: sticky; top: 100px; } ``` 使用`position: ...
position:sticky新特性
EmotionComputer
08-08 1508
一、Chrome杀了个回马枪 position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，Chrome什么时候杀了个回马枪，居然又支持了。眼瞅着，各个浏览器纷纷立了山头，要必要关心关心position:sticky了，不要被人留下厚此薄彼的口舌。 Safari目前还需要-webkit-私有前缀。 二、position:sticky简介 单词sticky的中文意思是“粘性的”，position:sticky表现也符合这个粘性的表现。基本上，
css之sticky定位
Kratial的博客
10-08 7718
css之sticky定位
CSS：图片不拉伸，垂直居中显示
qq_42034498的博客
12-15 2104
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
position:sticky
JiangLittleBai的博客
10-12 2万+
一直以来都忽略了position:sticky这个属性 现在回过头一看，我都错过了些什么。。。。。。 position:sticky简介 设置了position:sticky的元素并不会脱离文档流。 当元素在区域内，元素不受定位的影响（top、left等设置无效） 当发生滚动，元素就要移出区域时，定位又会变成fixed，根据设置的left、top的值进行定位，像是fixed效果 tagg{ position:sticky; top:0; } 必须注意的点 设置了po
CSS 粘性布局sticky：使用方法+代码示例
大剑师兰特的GIS世界
03-14 2731
CSS 中的 `position: sticky` 是一种混合了相对定位（relative positioning）和固定定位（fixed positioning）特性的定位模式。当一个元素设置了 `position: sticky` 后，它在正常文档流中的行为类似于相对定位，但在满足特定滚动条件时，它会变为相对于其最近的滚动祖先（通常是带有滚动条的父容器，如果没有这样的祖先，则相对于视口）固定在某个位置。
position: sticky属性的基本使用
weixin_43636361的博客
09-05 1518
简单的介绍一下position中的sticky属性
HTML里元素定位的介绍与基本应用
L20220927Y的博客
10-19 470
HTML里元素定位的介绍与基本应用
css中的position定位
forteenBrother的博客
07-31 527
position属性用于指定一个元素在文档中的定位方式。定位属性：top right bottom left 决定了元素的最终显示位置。
position: sticky 解释一下
最新发布
06-25
`position: sticky` 是 CSS 中的一个定位属性，它允许元素在滚动页面时保持部分定位，类似于元素被“粘”在了视口的某个位置上。当满足特定条件时，元素会脱离标准文档流，但仍然保持相对于其原始位置的相对位置，直到遇到另一个 `position: sticky` 元素或文档边缘。 以下是 `position: sticky` 的主要特点： 1. **顶部 sticky**: 当设置了 `top: sticky` 时，元素会在滚动到其 `top` 值所指定的位置（通常为 `0` 或者 `sticky-top` 类似值）时开始“粘”住，直到文档顶部。 2. **底部 sticky**: 同理，`bottom: sticky` 会让元素在滚动到底部时固定。 3. **侧边 sticky**: 可以使用 `left` 和 `right` 属性进行水平定位，元素会沿着相应的边固定。 **使用场景**： - 导航栏：可以让导航栏在滚动页面时保持可见，当用户滚动内容时，导航栏在顶部固定。 - 侧边广告或信息区域：在滚动时保持在屏幕的一侧，提供连续的内容或信息。 **注意事项**： - `position: sticky` 不兼容所有的浏览器，一些旧版浏览器可能不支持。 - 当父元素没有设置 `position: relative`, `absolute`, `fixed` 或者 `sticky` 时，`position: sticky` 的效果可能会受到影响。 - 如果没有指定其他 `position` 值，元素会继承其最近的已定位祖先元素的 `position`。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值