小程序开发时遇到样式需要随滚动变化的问题

本人作为随缘打法的开发苦手，基于能看懂、不会写的css基础，在作为练手项目 Pure Read 微信小程序的页面开发上想要实现如下效果：

页面背景用两个带运动的渐变圆+模糊效果，看起来背景有两个色块在运动不显得白色很单调


.bg {
		background-size: cover;
		background-attachment: fixed;
		min-height: 100vh;
		background-image: 
			radial-gradient(closest-side,rgba(170, 255, 255, 0.5),rgba(213, 85, 85,0)),
			radial-gradient(closest-side,rgba(255, 214, 227, 0.8),rgba(255, 214, 227,0));
		background-size: 
			100vmax 100vmax,
			80vmax 80vmax;
		background-position: 
			-60vmax -60vmax,
			20vmax 20vmax;
		background-repeat: no-repeat;
		animation: bgAnimation 30s linear infinite;
}

下面有若干个板块，它们的标题要吸顶，而且为了看到后面运动的背景，标题所属的块背景必须透明，如果设置为白色会遮挡住后面运动的两个色块，会有明显的割裂感


<template>
	<view class="bg">
		<view class="head">
			头内容
		</view>
		<view class="block" v-for="i in 4">
			<view class="title">
				<commonTitle>
					<template #title>标题{{i}}</template>
				</commonTitle>
			</view>
			<view class="content">
				板块{{i}}
			</view>
		</view>
	</view>
</template>

主界面


.head {
	width: 100%;
	height: 1000rpx;
}
.title {
	position: sticky;
	top: 0;
	z-index: 10;
}
.content {
	width: 100%;
	height: 1000rpx;
}

在吸顶后透明的标签要变磨砂效果，不然后面的内容会和标题内的文字重叠，很难看

问题出现在这个吸顶后的样式转变上，在网络上查询无果

于是一开始的思路是在滑动过程或结束时触发方法，在方法中检测标题的距离顶部的位置，如果发生改变就改变样式，利用 @touchend


<template>
	<view class="bg" @touchend="changeTitleBg">
		<view class="head">
			头内容
		</view>
		<!-- 用于检测顶部距离的鬼魂 -->
		<view class="ghost"></view>
		<view class="block" v-for="i in 4">
			<!-- 绑一个动态的class -->
			<view class="title" :class="{whitebg : isChangeTitleBg}">
				<commonTitle>
					<template #title>标题{{i}}</template>
				</commonTitle>
			</view>
			<view class="content">
				板块{{i}}
			</view>
		</view>
	</view>
</template>

主界面

调用 uni.createSelectorQuery()


// 记录初始top
const ghostTop = ref(0)
onReady(()=>{
		uni.createSelectorQuery().select(".ghost").boundingClientRect((c)=>{
			ghostTop.value = c.top;
		}).exec()
	})
// 每次划动结束调用一次，改变标记
const isChangeTitleBg = ref(false)
const changeTitleBg = (e)=>{
		uni.createSelectorQuery().select(".ghost").boundingClientRect((c)=>{
			if (c.top < ghostTop.value) {
				isChangeTitleBg.value = true
			} else {
				isChangeTitleBg.value = false
			}
			console.log(isChangeTitleBg.value);
		}).exec()
	}

注意动态绑定了一个叫 whitebg 的样式，这样向下划动结束时就会改变成模糊的背景，滑到最顶就恢复，理论上再修改亿些逻辑就能让他在某个top距离时再改变


.whitebg {
		background-color: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(15px);
	}

这个办法说实话，很傻逼，我不知道怎么写出来的，第二天来看真是哭笑不得，然后想css动画应该不至于不能按滚动变动画吧，于是一番探索，animation-timeline 出现了！！

animation-timeline 真是大救星，把样式改一下


.title {
			position: sticky;
			top: 0;
			z-index: 10;
			animation: blur linear;
			animation-timeline: view(block 0 80%);
		}


@keyframes blur {
		0% {
		}
		100% {
			background-color: red;
			backdrop-filter: blur(15px);
		}
	}

在 animation-timeline 下，标题只要移动到距离屏幕上边界0%、距离下边界80%这个范围内，就开始执行 blur 动画

为了看清楚，我给100%的那一帧加上一个区分的红色背景样式，now:

比之前用 JS 的方式好太多了TT

以上效果都是在H5下进行，最后想在小程序上试试，不出所料

翻车了

小程序的css不支持animation-timeline ，这个问题微信应该不会考虑支持

由于花了我有些时间，所以最后我选择在小程序上放弃这个效果，直接给 backdrop-filter: blur(15px); 作为微信特有的样式