微信小程序页面滚动时，固定元素半透明右移；页面停止滚动时，固定左移恢复原样

微信小程序页面滚动时，固定元素半透明右移；页面停止滚动时，固定左移恢复原样

效果图：

js

const app = getApp()Page({data: {text: "楚河汉街， 人流如织， 武汉的春天如约而至， 如今的岁月静好， 是一群平凡人的伟大逆行换来的， 谨以此片献给为武汉拼过命的每个人！在最困难的时期， 武汉没有从天而降的英雄，只有一个个挺身而出的普通人，他们会和医护人员共同奋斗在前线。他们是厨师， 是司机， 是民警， 是教师， 是学生…他们， 是每一个用行动为武汉加油的人。信念， 具有打败一切困难的力量。胜利， 是众志成城凝聚而成的光。那些曾经未知的恐惧和伤痛的无奈，让武汉人民对生命有了更为深刻的体验，对生活有了更为奋力的追求，因此他们能在向死而生的夹缝中，保有希望的长存。凛冬已过， 疫霾散去，长江大桥车水马龙，黄鹤楼再次熠熠生辉，错过的春天， 正在归来，让我们共同期待最美四月天！"},onPageScroll: function(e) {debuggerthis.setData({shopMoveRight: true,scrollTop: e.scrollTop,})let timer = setTimeout(() => {if (this.data.scrollTop === e.scrollTop) {this.setData({scrollTop: e.scrollTop,})console.log('滚动结束');clearTimeout(timer);this.setData({shopMoveRight: false,shopMoveLeft: true})}}, 500)this.setData({shopMoveLeft: false})},
})

wxss

.con {font-size: 40rpx;line-height: 80rpx;
}
.veright {-webkit-animation: right 0.5s ease;animation: right 0.5s ease;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;
}
@-webkit-keyframes right {from {right: 14px;opacity: 1;}to {right: -120px;opacity: 0.5;}
}
@keyframes right {from {right: 14px;opacity: 1;}to {right: -120px;opacity: 0.5;}
}
.veleft {-webkit-animation: left 0.5s ease;animation: left 0.5s ease;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;
}
@-webkit-keyframes left {from {right: -120px;opacity: 0.5;}to {right: 14px;opacity: 1;}
}
@keyframes left {from {right: -120px;opacity: 0.5;}to {right: 14px;opacity: 1;}
}
.fix {position: fixed;display: flex;align-items: center;justify-content: center;width: 360rpx;height: 128rpx;right: 28rpx;bottom: 109rpx;background: #FFFFFF;box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);border-radius: 80rpx;
}
.fix .consul {text-align: center;line-height: 40rpx;font-size: 35rpx;color: rebeccapurple;
}

wxml

<view class="con">{{text}}{{text}}{{text}}</view>
<view class="fix {{shopMoveRight?'moveright':''}} {{shopMoveLeft?'moveleft':''}}"><view class="consul">武汉的春天已来</view>
</view>