我如何使一个小的标志，而内容在角滚动像任何whatsapp号码个人资料查看

Question

我正在做一个演示项目在角，我需要使我的个人资料图片更小，从屏幕的中心到屏幕的左上角角当内容滚动。这类似于当我们查看whatsapp号码的个人资料并向上滚动以查看其余内容时，个人资料照片和电话号码会从中间移到左上角。

我可能无法通过写信来澄清你的细节…所以我录制了一个屏幕，并截取了我所做的截图…

期待:text

尝试:text

Answer 1

你可以使用rxjs创建一个关于文档滚动的可观察对象

首先定义四个常量

export const MINSCROLL=20
export const MAXSCROLL=100
export const MIN_SIZE=50
export const MAX_SIZE=120

然后定义一个可观察对象

height$=fromEvent(document,'scroll').pipe(
    startWith(null),
    map(()=>{
      const x=window.scrollY;
      if (x>MAXSCROLL)
        return MIN_SIZE;
      if (x<MINSCROLL)
        return MAX_SIZE
      return MAX_SIZE-(MAX_SIZE-MIN_SIZE)*(x-MINSCROLL)/(MAXSCROLL-MINSCROLL)
  }),
  distinctUntilChanged(),
  )

请注意使用map来转换响应。如果窗口。scrollY小于MIN_SCROLL返回MAX_SIZE，大于MAX_SCROLL返回MIN-SIZE，否则返回一个"三"规则

然后在div

中使用这个可观察对象

<div class="top" [style.height.px]="obs$ |async" >

,

.top
{
  position:fixed;
  background-color:white;
  width:100%;
  top:0;
  left:0;
  right:0;
  text-align:center;
}

查看stackblitz