position:sticky的兼容问题
发布于 6 年前 作者 nhuang 17108 次浏览 来自 问答

bug：

position:sticky 失效  但是删除小程序重新加载就会修复

目前只在安卓机上发现过  小米mix2 华为mate10 （ Android8.0 ）

5 回复

记录一下：

  1. 父元素使用  overflow: hidden; 之后子元素的  position:sticky会失效

  2. 元素使用display:flex 之后，hidden 属性失效

这个不太好提供 就是scroll-view里有个水平的scroll-view

css:

.scroll-tab-bar {

    width: 100%;

    height: 120rpx;

    line-height: 120rpx;

    white-space: nowrap;

    padding: 0rpx 41rpx;

    background-color: #ffffff;

    box-sizing: border-box;

    position: sticky;

    position: -webkit-sticky;

    z-index: 99;

    top: 0;

}

 position: sticky 不知道什么条件下在上述机型里失效

代码片段是一种可分享的小项目，可用于分享小程序和小游戏的开发经验、展示组件和 API 的使用、复现开发问题等等。分享代码片段会得到一个链接，所有拥有此分享链接的人可以在工具中导入此代码片段。如果网页可点击的链接指向的是分享链接，那么点击链接也会自动打开工具进入代码片段导入页。请参照文档给出代码片段

@ 小辣椒

 

  是这样的, 一款叫 <玩味新美食> 的小程序,使用小米mix2 打开设置了sticky的title,第一次打开是可以正常吸顶的,但是我从内存中干掉了这个小程序,在发现->小程序列表中  重新进入,发现就不能吸顶了.   测试环境下,小米mix2是完全不能吸顶的,mix2 版本为9.5.5.0 ,貌似不支持sticky.  但是我下载到线上的可以正常使用一次,很奇怪

你好，方便给个代码片段？

回到顶部