position: sticky 粘性定位细节

最新推荐文章于 2023-06-20 22:57:13 发布
最新推荐文章于 2023-06-20 22:57:13 发布
阅读量229 收藏
点赞数
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PandaLiXu/article/details/129788140
版权

position: sticky 粘性定位细节

1. 位置（left top right bottom）

top
会依次向上去寻找第一个带有 overflow: hidden 样式的元素(如果找不到：相对的就是整个视口)，元素到达相对元素的位置top值，就会触发 sticky 粘性定位。
注意
如果 sticky没有触发，很有可能你在元素的 第一个父级容器 设置了overflow: hidden 导致的；
原因 : 给第一个父级元素设置了overflow: hidden，那么元素距离父元素的top值的相对位置也就不会发生变化，因此sticky定位属性也就不会生效了

2. 粘性定位离开

当元素的 整个父元素 离开了页面之后，元素就会随着父元素随之离开界面

PandaLiXu
关注
粘性定位 position: sticky
hdz52013的博客
08-02 803
粘性定位可以被认为是相对定位和固定定位的混合。元素在跨越特定阈值前为相对定位，之后为固定定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initi...
position: sticky失效原因, 与overflow: hidden起冲突
sdfsd342w35r的博客
08-07 1797
父元素及其祖先元素不能有overflow: hidden, 包括overflow-x:hidden,overflow-y:hidden;都是不能有的
关于position的sticky定位的介绍
ccattempt的博客
02-04 914
前端时间浏览阮神的博客发现position居然还有个sticky这种神奇的定位，马上试了试，简单好用，一些简单的，比如说手机京东网页的吸附效果就可以使用sticky快速做好。 目录1、`sticky`的效果2、`sticky`的简单介绍3、参考链接 1、sticky的效果 sticky有粘性的意思，所以sticky定位也可以称为粘性定位。从名字就可以看出这个定位常用于一些吸附功能。例如下面这个京东的页面，页面向上滑动的时候搜索框会从相对定位变成固定定位，使得其在用户浏览页面的时候搜索框一直固定在顶部，便.
CSS：深入理解粘性定位 position: sticky
weixin_43932309的博客
05-02 1万+
粘性定位尝鲜，祖先元素的overflow和height对结果的影响。
探索CSS中的粘性定位：解锁网页布局的新可能
欢迎来到我的前端博客！这里汇集了关于前端开发的最新技术、实用工具和经验分享。我将为你提供详细的教程、代码示例和实战案例，帮助你掌握Web开发的核心概念和技能。不论你是初学者还是有经验的开发者，这个博客都适合你。
06-20 4558
这篇文章详细解释了CSS中的sticky定位方式，并讲解了它的工作原理。CSS中的sticky定位有很好的浏览器支持，但许多开发者并没有使用它。原因有两方面：一是等待浏览器支持的时间太长，导致这个特性被遗忘；二是大部分开发者并不完全理解它的工作原理。我假设你们都知道CSS定位，但让我们简要回顾一下：直到3年前，有四个CSS位置：staticrelativeabsolute和fixed。static或relative与absolute或fixed之间的主要区别在于它们在DOM流中占用的空间。
position sticky与overflow冲突失效无作用，解决办法
hyduan_h5的博客
08-04 4079
position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...
JS解决position:sticky的兼容性问题的方法
11-30
在前端开发中，`position: sticky` 是一种CSS布局属性，它允许元素在滚动到某个阈值时在页面上保持“粘性”。然而，`position: sticky` 在某些浏览器，尤其是旧版本的Android设备上可能存在兼容性问题。为了解决这个...
详解css粘性定位position：sticky问题采坑
12-14
CSS中的`position: sticky`是一种混合定位方式，它结合了`relative`和`fixed`的特点。在页面滚动过程中，当元素距离其父元素达到设定阈值（如`top: 100px`）时，`position: sticky`会使元素变为固定定位，保持在屏幕...
position:sticky粘性定位
希望我快乐
04-07 1279
项目中可能会遇到这样的需求：当页面某个元素滚动到顶部时，让其定位或悬浮在顶部，如下图红框区域所示： 方式一：C3新属性，position:sticky 实现以上效果的最简单方式，是使用C3提供的新属性position:sticky。然后设置top值等于顶部导航的高度即可。同理，根据效果可以设置 right，bottom，left。 MDN给出的说明： The element is posit...
CSS使用position:sticky 实现粘性布局的方法
12-14
在CSS布局中，`position: sticky` 是一种特殊定位方式，它结合了 `position: relative` 和 `position: fixed` 的特性，适用于某些特定场景。`position: sticky` 在元素滚动到某个阈值之前表现得像 `position: ...
css position: sticky粘性定位
352328759的博客
03-06 1950
最近认识到position: sticky;这个比较新的css属性.功能就如字面意思 定位: 粘性; 用这个新属性做 固定顶部 的功能,简直是湿湿碎 作为新属性,简单介绍下它的特性: 只对最近一个的滚动环境有效 没有滚动环境最后会冒泡到视图窗口,与其它position类似 与最近一个的滚动环境之间可以有其它中间节点 在中间节点里,定位也能有效,但受中间节点影响,影响规律不明 定位是相对于最近的滚...
position:sticky粘性定位的几种巧妙应用与理解。
热门推荐
小祥编程擅长前端
09-14 2万+
position：sticky又称为粘性定位，是css3新增的。粘性定位的元素依赖于用户的滚动，在相对定位（relative）与固定定位（fixed）之间进行切换，基于位偏移的值进行偏移。粘性定位可以被认为是相对定位和固定定位的混合元素在跨越特定位偏移之前为相对定位，之后为固定定位。top: 50px;}设置了以上元素，在屏幕范围（viewport）视口滚动到元素top距离小于50px之前，div为相对定位。之后元素将固定在与顶部距离50px的位置，直到viewport视口回滚到50px以内。
position:sticky 粘性定位
卿本无忧的博客
03-03 1万+
position:sticky 粘性定位
vue 如何监测position:sticky;已经生效和未生效
weixin_35751412的博客
01-03 818
可以使用 Vue.js 的计算属性来监测 position:sticky 是否生效。 首先，可以通过给元素添加一个 ref 属性来获取元素的 DOM 元素： <template> <div ref="sticky">sticky element</div> </template> 然后，可以在计算属性中使用这个 DOM 元素的 getBound...
轮子之vue-sticky
胡西风的博客
06-08 289
当要 sticky 时，其元素为浮动元素 (position:fixed)，没有占位，例下图，本来浏览器是能显示 9 行，在没有滚动前：浏览器能显示 8+1 行 (包括还没有 sticky 之前这一行的元素)。那么滚动浏览器页面：第一行就会变成 sticky 浮动起来，但是浏览器已经滚动到显示 9 行，原本浏览器就是可以包含 9 行，那么滚动条就会消失，既然这个时候不能滚动了，那就不要 sticky 了，所以滚动时 sticky 就会进入一个变与不变的死循环里。，到显示屏上边框的距离会随着滚动而变化，
position:sticky；粘性布局
CodingNoob
12-06 2461
生效规则 position:sticky的生效是有一定的限制的，总结如下： 须指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。 并且top和bottom同时设置时，top生效的优先级高，left和right同时设置时，left的优先级高。 设定为position:sticky元素...
position: sticky；吸顶滚动页面抖动(已解决)
mia0303的博客
08-05 7488
position: sticky；吸顶滚动页面抖动(已解决)
块元素居中方式
gklcsdn的博客
12-10 828
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css粘性定位position:sticky问题采坑
最新发布
06-28
CSS粘性定位（position:sticky）是一种新的定位方式，它可以在不同滚动位置下保留元素位置，使得页面更加直观。但是这种方式还存在一些采坑需要注意。 首先是浏览器兼容性问题。目前，不支持CSS粘性定位的浏览器...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值