sticky不生效踩坑

最新推荐文章于 2024-03-28 17:20:19 发布
最新推荐文章于 2024-03-28 17:20:19 发布
阅读量1.6k 收藏
点赞数 1
分类专栏： 前端 # HTML+CSS+JS 文章标签： 定位 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40050368/article/details/117710169
版权
sticky不生效踩坑：
  • 父元素设置了overflow:hidden或者overflow:auto属性
  • 未指定top、right、bottom、left中的任意一个
  • 父元素的高度低于sticky定位的元素高度
sticky属性仅在以下几个条件都满足时有效：
  • 父元素不能设置overflow:hidden或者overflow:auto属性
  • 必须指定top、bottom、left、right中的任意一个，否则只会处于相对定位
  • 父元素的高度不能低于sticky定位的元素高度
sticky原理：
  • sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换
    元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位
smallseapig
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于sticky属性无效的问题
BIGDgreen
03-31 1万+
问题 最近在写一个小游戏时，遇到了sticky标签无效的问题。在这里记录一下~ ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190331150725111.png) 就是这个工具栏，我希望他的高度是整个页面，并且在最左边不动，因此在css中设置： #funcarea{ height: 100%; float: left; position:stick...
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的...position:sticky为此而生,接下来
uniapp:粘性布局（吸顶：u-sticky）生效的注意事项
qq_45796592的博客
07-07 5086
子元素高度超过父元素高度，父元素使用overflow的auto、scroll等属性，此时有滚动，sticky依然是有效。元素都不能使用除了overflow的visiable以外的其他属性，比如auto、scroll、hidden。父元素高度没有设置，但是父元素的父元素设置了overflow:hidden。，一定要注意自己使用的原因是什么，要对什么内容进行吸顶的操作。除了父元素还要留意自己写的祖先元素的样式！
uni-app 小程序 sticky 固定定位失效
最新发布
weixin_43743378的博客
03-28 697
后续使用sticky定位设置相对位置时，还是应该优先设置top，这样可以避免出现这种莫名的问题。
css3 sticky不生效怎么办
mm744的博客
01-30 444
css3 sticky不生效的解决办法：1、父元素不能overflow:hidden或者overflow:auto属性；2、必须指定top、bottom、left、right4个值之一；3、父元素的高度不能低于sticky元素的高度。 本教程操作环境：windows7系统、css3版，该方法适用于所有品牌电脑。 推荐：《css视频教程》 sticky不生效原因有： 父元素设置了overflow:hidden或者overflow:auto 未指定top、right、bottom、left4个值中的任意一个 父
uview 中u-sticky 无效用法
qq_36944548的博客
06-23 2891
uview 中u-sticky 无效用法
css3 sticky不生效的原因？
逸尘的专栏
06-20 3288
sticky不生效原因有： 父元素设置了overflow:hidden或者overflow:auto 未指定top、right、bottom、left4个值中的任意一个 父元素高度小于sticky定位的元素高度 sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。 sticky属性仅在以下几个条件都满足时有效： 父元素不能overflow:hidden或者ov
nginx-sticky 不报错版
09-20
nginx-sticky 编译不报错版
sticky notes
06-21
sticky notes
CSS Sticky Footer实现代码
09-22
CSS Sticky Footer 是网页设计中一种常见的布局技巧，它能让页面的底部始终固定在视口的底部，无论页面内容是否填充满整个屏幕。这种布局方式在响应式设计中尤其有用，可以提供良好的用户体验，确保用户在任何情况下...
position:sticky 实现粘性布局
11-16
css 样式 position:sticky 实现粘性布局
position:sticky不生效
qq_38886284的博客
11-10 2411
通常我们用来实现吸顶效果都会用到position:sticky,但是在以下这几种情况的时候sticky会失效。
vue 简单吸顶效果实现vue中sticky不起作用替代方案
空空墓志铭的博客
08-22 2276
vue项目中需要实现吸顶效果，但sticky不起作用，v-sticky插件也没效果，费了半天劲愣是没能实现。查阅资料后发现，sticky不生效原因有：1）父元素设置了overflow:hidden或者overflow:auto2）未指定top、right、bottom、left4个值中的任意一个3）父元素高度小于sticky定位的元素高度sticky属性依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。
小程序基本命令
aiven1637的博客
10-30 3264
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
css3 sticky不生效
Alice9969的博客
08-14 439
​​​​​​​转载自：https://www.jianshu.com/p/b72f504121f5 作者：这名字真不对 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 总结原因： 1. top、bottom 的生效距离由最近一个overflow属性是hidden scroll auto或 overlay 的祖先元素决定。 2. 父元素为overflow:hidden时，由于容器内无法滚动，所以实际上也无法生效。 3.必须指定top、bottom、left、right4个..
uni-table打包成app，在低版本安卓中使用 position: sticky；不生效的解决方法
c_jiji_yy的博客
09-13 304
直接在每一个中加position: sticky，然后就可以了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值