我做的吸顶,滚动之后滚动的内容和吸顶内容重叠了,怎么控制?如图:
<view class="head_view static_head" style='z-index: 1;{{fixTop<scrollTop ? "position: sticky; position: -webkit-sticky; position: -moz-sticky; position: -ms-sticky; position: -o-sticky; top: 0;": ""}}'>
</view>
onShow: function () {
let self = this;
wx.createSelectorQuery().select('.static_head').boundingClientRect(function (rect) {
self.setData({
fixTop: rect.top,
})
}).exec()
},
onPageScroll: function (res) {
let self = this;
let top = res.scrollTop;
self.setData({
scrollTop: top
});
}
position: sticky 貌似是有兼容性问题的吧? 你试试 IOS上可以用么?
1.吸顶容器设置背景色。
2.z-index设置大一些。
3.另外 吸顶可以试试position:sticky。具体使用方法可以搜索一下。
吸顶的内容设置下背景颜色 即可 还有类似问题建议写个代码片段
z-index