.container{
width: 600rpx;
height: 800rpx;
}
.a {
position: sticky;
position: -webkit-sticky;
top: 0;
width: 100%;
height: 200rpx;
background-color: black;
}
.b {
width: 100%;
height: 3000rpx;
background-color: red;
}
<scroll-view class="container">
<view>
<view class="a"></view>
<view class="b"></view>
</view>
</scroll-view>
sticky的元素在到达父元素的底部时会失效
scroll-view的高度为800rpx,但是scrollHeight为3200rpx,所以在scroll-view中嵌套一个view就能顺利定位
我也遇到同样问题了。要注意两点的
1.父元素不能是over:hidden
2.scroll-view里要加个view再嵌套sticky进去
建议参考这个官方示例,
https://developers.weixin.qq.com/s/P73kJ7mi7UcA
准确来说,如果希望sticky元素对于整个scroll-view容器起作用,在scroll-view中应有且仅有一个view作为其所有子元素的根元素。
解释:因为平台scroll-view的特性问题,sticky元素在离开了原定的scroll-view的height距离后,就不能识别scroll-view的距顶高度了,所以用一个无样式的view撑开整个scroll-view中元素的高度,让这个view以能够替代scroll-view被获取高度,从而达到样式正常。
更改前
<scroll-view>
<一堆子元素>
</scroll-view>
更改后
<scroll-view>
<view>
<一堆子元素>
</view>
</scroll-view>
专门登录来给你点赞,解决了我的问题
感谢楼主,成功解决。简言之,设置sticky元素上层的容器,必须设置长和宽为最大内容长宽。
按楼主的代码,直接做了一个view作为上层容器是不行的,看到实际渲染时它的宽高自动设为了上层scroll-view的宽(默认的750rpx)高,仍会出现楼主的问题(我是横向滚动)。
在将上层view设置了固定的宽高为内容最大宽高(大于上层scroll-view的宽高)后,sticky内容效果正常。
<scroll-view class="scroll-view_H" scroll-x="true" bindscroll="scrollX" style="width: 100%">
<view style="width: 1120rpx;">
<view class="title-wrap">
...
</view>
<view class="report-item" wx:for="{{10}}" wx:key="id">
<view class="col">0.4条</view>
<view class="col">¥100.00</view>
<view class="col">¥13.56</view>
<view class="col">13.56%</view>
<view class="col">¥25.00</view>
<view class="col">1.04</view>
<view class="col">¥0.00</view>
<view class="col">0.00</view>
</view>
</view>
</scroll-view>
.report .title-wrap {
position: sticky;
top: 37px;
display: flex;
flex-wrap: nowrap;
}
感谢分享, 这bug直接让血压拉满
你是真的凶!!!微信团队都没想到的方法,你一个view就搞定了。小程序的scroll-view的浮动sticky定位真的难啊。感谢感谢。
特意登录答谢!!!!
特意登录上来感谢大佬
专门登录来感谢 点赞 收藏
特地登录来赞一下,牛逼
nb!感谢