搜索

+

106

-

回答

可通过监听组件滚动scroll实现：

<scroll-view scroll-y class="page" @scroll="onScroll" >
  <image src="/static/Bg.png" mode="widthFix" class="response"></image>
  <view style="position: sticky;top: 0;z-index: 111;" :class="{'sticky-active': isSticky}">
  sticky header
  </view>
</scroll-view>

data中新增isSticky:false,

method

 onScroll(e) {
				
	 const scrollTop = e.detail.scrollTop;
		 console.log(scrollTop)
	 if (scrollTop >200) {
		 this.isSticky = true;
	} else {
		this.isSticky = false;
	 }
 },

css

.page{
		height: 100vh; /* 确保容器有高度 */
		  overflow-y: scroll; /* 确保容器可以滚动 */
	}
	.sticky-active {
	  background-color: white; /* 滚动到顶部时的背景颜色 */
	   box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
	}

网友回复

我知道答案，我要回答

我有问题

最新提问