图片随滚动变透明

图片随滚动变透明

onMounted(() => {
    //记录一下需要滚动的高度，随字体大小变化
    let str = (document.getElementsByTagName('html')[0] as any).style.fontSize;
    fontSize.value = +str.substring(0, str.length - 2);
    scrollSize.value = 4.2 * fontSize.value;
    //注册事件
    window.addEventListener('scroll', scrolling);
})
const scrolling = (e: any) => {
    //获取元素
    const hasGradient: any = document.querySelector('.project-explain_top');
    const n = document.documentElement.scrollTop;
    if (n > 0) {
        //修改元素背景色，透明度为离顶部距离/需要滚动的高度
        hasGradient.style.background = `rgb(255,255,255,${n / scrollSize.value})`;
    } else if (n == 0) {
        //滚到顶部就设为透明色
        hasGradient.style.background = `transparent`;
    } else {
    }
};