导致position:sticky失效的原因

最新推荐文章于 2024-07-17 19:08:41 发布
最新推荐文章于 2024-07-17 19:08:41 发布
阅读量8.8k 收藏 2
点赞数 7
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43422122/article/details/108730303
版权

导致position:sticky失效的原因

在这里插入图片描述

一、简介

sticky 英文字面意思是粘，粘贴，所以称之为粘性定位。sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，即指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。

二、使用条件

sticky属性仅在以下几个条件都满足时有效：

父元素不能overflow:hidden或者overflow:auto属性，或者body height:100%
必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
父元素的高度不能低于sticky元素的高度

Timer@
关注
专栏目录
【Web前端】position: sticky滑动一定长度后失效
Get your hands dirty
02-06 2105
检查使用position: sticky属性的元素的父元素，是否设置了height属性。删除父元素的height属性即可。
粘性布局之固定表头
katherin_wanzi的博客
03-29 837
一、粘性布局 position: sticky 配合 [left, right, top, bottom] 中一个即可实现粘性布局 粘性布局只在其父元素空间内生效，且要实现 “粘性” 效果，对其父元素有以下要求，否则粘性效果会失效 必须满足父元素在需要粘的轴上的空间 > 粘性布局子元素在需要粘的轴上的大小（例如子元素设置top/bottom粘垂直轴，父元素的高度需要大于子元素的高度，这样才有可以活动的空间嘛） 父元素中不能设置 overflow: hidden 或 overflow: auto 未同
标题固定，内容滚动的css布局方式总结
云雨之石的博客
11-01 2525
最近在项目中遇到了一个样式问题，需要样式内容中，标题部分粘性定位于一个地方，内容部分滑动，滑动过程中标题位置不动。 这是一种挺常见的场景，但对于我来说还真没有在实际开发中遇到很多。于是我最开始的想法就是使用position: sticky，将标题进行粘性定位，效果也很快出现。 但是令我没有想到的是，这个position: sticky的兼容性太差了，特别对于IE还有safari，后来测试就来找我，说在老版本的iPad上边用浏览器打开样式是有问题的，我排查后发现，在老iPad上边sticky属性直接就无用了。
小程序自定义导航后u-sticky吸顶失效
最新发布
m0_58373910的博客
07-17 515
【代码】小程序自定义导航后u-sticky吸顶失效。
粘性布局 以及粘性布局失效问题
paidaboluo的博客
07-27 2845
粘性布局 以及粘性布局失效问题
position:sticky不生效
qq_38886284的博客
11-10 3896
通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。
position：sticky失效问题剖析
Rex的博客
03-10 1万+
sticky失效原因position:sticky生效的原理 position:sticky生效的原理 在 W3 官方文档中的定义是：Sticky positioning is similar to relative positioning except the offsets are automatically calculated in reference to the nearest scrollport. 通俗来说就是，Sticky 定位类似于相对定位relative，（当它表现为 fixed 定位
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
m0_71491195的博客
07-15 6672
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
position设置sticky不生效的几种情况
热门推荐
李小乐er
01-14 3万+
1.它的父元素或者父元素的父元素等（总之就是直系长辈元素）任意一个设置overflow:hidden;overflow-x: hidden; overflow-y: hidden;overflow:auto;overflow-x:auto;overflow-y:auto;的任意一种时，就会不生效。 2.未设置top,right,bottom,left中的任意一个值。相当于没设置脱离文档流后的固定位置，是以哪个位置为依据。所以也不会起到效果。 3.一个页面中，多处设置sticky。如果设置的固定住的位置相
uni-app 小程序 sticky 固定定位失效
weixin_43743378的博客
03-28 1152
后续使用sticky定位设置相对位置时，还是应该优先设置top，这样可以避免出现这种莫名的问题。
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
微信小程序----position:sticky
12-20
在微信小程序开发中，`position:sticky` 是一个非常实用的CSS样式，它结合了`position:relative`和`position:fixed`的特点，用于创建元素的粘性定位。这个特性允许元素在滚动到特定位置时固定在屏幕的某个位置，从而...
pageScrollTo滚动 导致 position: sticky 失效
07-27
然而，根据引用\[3\]的问题描述，使用wx.pageScrollTo()方法可能会导致position: sticky失效。这可能是因为滚动到指定位置后，页面的布局发生了变化，导致sticky定位失效。为了解决这个问题，可以尝试在滚动到指定...
关于position: sticky在小程序中IOS真机下偶然失效的问题总结
zaihukeji的博客
08-19 692
虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。 最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论： IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效 直接在页面中写sticky有效
css3 position定位sticky不生效的原因？
細水、長流√的专栏
09-07 520
sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。必须指定top、bottom、left、right4个值之一，否则只会处于相对定位。父元素不能overflow:hidden或者overflow:auto属性。父元素设置了overflow:hidden或者overflow:auto。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。父元素的高度不能低于sticky元素的高度。父元素高度小于sticky定位的元素高度。
设置position: sticky；不生效的原因
秃头小吴
06-09 2538
昨天设置 position: sticky;属性没生效，我辛辛苦苦排查了一天，终于找到了原因
position sticky与overflow冲突失效无作用，解决办法
hyduan_h5的博客
08-04 4117
position 可能失效的情况：1、须确定设置sticky元素的参考滚动父级元素2、指定 top, right, bottom 或 left 四个阈值其中之一（且达到设定的阈值），才可使粘性定位生效。否则其行为与相对定位相同；并且 top 和 bottom 同时设置时，top 生效的优先级高，left 和 right 同时设置时，left 的优先级高。...
【CSS面试题】position：sticky不生效原因
qq_40992225的博客
08-03 1566
今天遇到布局时设置了 position: sticky；发现没有生效，于是找了一下问题的原因；
uni-table打包成app，在低版本安卓中使用 position: sticky；不生效的解决方法
c_jiji_yy的博客
09-13 385
直接在每一个中加position: sticky，然后就可以了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值