【Web前端】position: sticky滑动一定长度后失效

已于 2023-05-27 21:09:05 修改
阅读量3.2k 收藏 2
点赞数 7
分类专栏： Web前端 文章标签： uni-app 小程序
于 2023-02-06 23:03:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Dawson_Ho/article/details/128909833
版权
本文探讨了在uni-app或小程序中遇到position: sticky元素在滑动一定长度后失效的常见原因，主要集中在父元素设置的height属性上。通过检查并移除父元素的height属性，可以有效解决这个问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

检查使用position: sticky属性的元素的父元素，是否设置了height属性。

删除父元素的height属性即可

关于position: sticky在小程序中IOS真机下，偶然失效的问题总结
厦门在乎科技
08-31 2942
虽然小程序中有大把的自定义sticky组件可用，原理无非是监听页面滚动改变position来实现，实际体验上卡顿感难以避免，跟原生的position: sticky比还是有很大距离。 最近写的页面已经开始逐渐用上原生position: sticky，在测试中发现IOS真机下，某些场景的sticky会失效，花了点时间研究，得出来以下结论： IOS必须加上position: -webkit-sticky; IOS下sticky的元素必须与占位元素在同一个作用域下面，才生效 直接在页面中写sticky有效
关于iOS tab吸顶之后不能左右滑动的问题
weixin_49549401的博客
05-12 555
之前写项目的时候遇到过一个问题，使用position: sticky;实现tab吸顶效果，tabs超出屏幕可以左右滑动，在安卓和iOS一些版本上都可以，但是在iOS12.5.2上会出现一些问题 样式类似于这样 tab吸顶之后，就不能左右滑动了，后面检查代码，发现问题出现在css上，实现tab左右滑动效果使用的是，父元素设置 display: flex; overflow-x: auto; 子元素设置 min-width: px2rem(160); 后面把父元素的样式改成这样就可以了 display:
导致position:sticky失效的原因
前端那些事@时光
09-22 9103
导致position:sticky失效的原因 一、简介 sticky 英文字面意思是粘，粘贴，所以称之为粘性定位。sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。这个特定阈值指的是 top, right, bottom 或 left 之一，即指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。 二、使用条件 sticky属性仅在以下
解决table用position: sticky固定多层表头，滑动滚动条，固定列边框透明、不显示问题
m0_74937643的博客
01-22 1250
解决办法，给表格采用outline样式，取消原有的border边框，在项目中如果引用了大量的外联样式，建议将此代码作为内联样式使用，这样既可以解决滑动边框消失问题，也可以给表格加上边框。是 CSS 中用于绘制位于元素边框边缘之外的线条或区域，它不会影响元素的尺寸或位置。水平滑动以后的表格样式，可以看到固定列的边框消息，并且出现透明效果，能看见滑动列的内容。固定多层表头是一种常见的做法，它可以让用户在滚动页面时始终看到表格的标题行。未滑动前表格样式，在未滑动表格时，固定列边框存在，此时的固定列样式。
position: sticky 不生效
qq_44944325的博客
03-11 891
position: sticky 需要父容器具有明确的高度或溢出属性（如 overflow: auto 或 overflow: hidden），否则无法生效。如果 sticky 元素在滚动时没有足够的空间（例如父容器高度不足），sticky 效果可能不明显或失效。如果父容器使用了 transform 或 filter 属性，position: sticky 会失效。如果父容器没有滚动，sticky 不会生效。如果父容器设置了 overflow: hidden，position: sticky 会失效。
position:sticky不生效
qq_38886284的博客
11-10 5435
通常我们用来实现吸顶效果都会用到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 定位
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。如果设置的固定住的位置相
sticky 失效问题
拿回忆下酒
11-13 2977
什么是 Sticky Sticky （MDN 翻译成粘性效果）是 CSS 属性 position 中的一个可选值。跟我们用得比较多的 static, fixed，relative，absolute 一样，用来描述元素的定位方式。 从效果上看，Sticky 像是混合体，页面滑动到“临界点”之前表现为 relative, 到达“临界点”时表现为 fixed。 假设大家都已经会使用了，但是sticky使用中，无效时，那么有可能是以下几点没考虑到 注意事项 sticky属性依赖于用户的滚动，在 position:r
position: sticky滑动的时候抖动
最新发布
04-13
好的，我现在需要解决用户提到的position: sticky在滑动时产生抖动的问题。首先，我得回忆一下position: sticky的工作原理。根据引用内容，sticky元素在滚动到特定位置时会从相对定位变为固定定位，这可能导致在切换...
自学前端第十八天:CSS精准定位position
weixin_47592060的博客
04-30 1466
超级重点:CSS精准定位(position) 一. ①CSS定位基本概念:如果说, float浮动关键在一个 “浮起来” 字上面， 那么 我们的position定位关键在于一个 “精准位” 上。 ②CSS定位目的上，如果说，浮动的主要目的是 让多个块级元素一行显示，那么定位的主要价值就是 移动位置， 让盒子到我们想要的"任意坐标"位置上去。 ③CSS定位本质上: 不仅能像float浮动一样,可以脱离文档流束缚的情况下将元素放在你想放置的位置,还可以帮助你快速精准,。就跟高德地图精确的定位系统一样，
position: sticky无效
qq_28565961的博客
02-26 1305
position: sticky是黏性定位，可以实现和fixed定位一样的效果，但是它不会脱离文档流。 坑 使用的过程中发现是按照文档例子写的，position: sticky定位元素也使用了top属性。但是就是不生效，排查一通后发现是最顶层元素使用了overflow: hidden;，原来只要是祖先元素（注意是祖先元素）只要使用了overflow: hidden;就会导致position: sticky失效。 那么MDN文档里关于position: sticky描述是不是有问题？ 我试了下hidden,
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
m0_71491195的博客
07-15 6989
html和css页面导航栏顶端固定，粘性定位（position: sticky；）失效原因
解决position：sticky元素有父盒子时不生效的问题
YY的博客
04-06 859
解决position：sticky元素有父盒子时不生效的问题
position:sticky的应用与失效条件
睡魔的博客
12-21 2599
1.使用方法 sticky生效的前提是，必须搭配top、bottom、left、right这四个属性一起使用，不能省略，否则等同于relative定位，不产生"动态固定"的效果。 它的具体规则是，当页面滚动，父元素开始脱离视口时（即部分不可见），只要与sticky元素的距离达到生效门槛，relative定位自动切换为fixed定位；等到父元素完全脱离视口时（即完全不可见），fixed定位自动切换回relative定位。 2.应用场景 （1）顶部Nav导航的自动跟随，以前用JS实现的效果现在只要两行C
关于 position: sticky 无法正常工作的问题总结
qq_60743005的博客
03-18 187
为什么我的 position: sticky 无法正常工作
深入解析CSS定位：破解position: sticky失效的十大场景
Yue
02-28 996
position定位及sticky失效原因详解
小程序自定义导航栏后sticky吸顶失效问题
sxy323的博客
09-25 1621
问题：在微信小程序页面使用了自定义导航栏，在导航栏下有一个吸顶的标题，由于iOS和安卓手机css样式兼容性问题，在使用定位的时候统一选择了position:sticky;定位，但是标题并没有吸顶而是在页面滚动的时候随着页面滚动上去。解决方法：在页面获取自定义导航栏的高度，给吸顶标题的元素设置top为自定义导航栏的高度。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cimoon_

一分也是爱，用钱砸我

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值