스크롤 속도에 따라 사라지거나 나타나는 눈썹을 만들다

위로 스크롤하면 머리를 만들 때 반 대신 자바스크립트를 사용하고 애니메이션은 CSS로 구현하는 방법이 많다.그러나 이렇게 하면 애니메이션의 속도가 일정하고 구역질이 나기 때문에 제목도 스크롤 바와 같이 같은 속도로 움직일 수 있다고 생각합니다.
말로 설명하기는 어렵지만, 어쨌든 이런 행위다.

견본

마우스(설정에 따라)라면 속도가 빨라 분별하기 어려우니 터치스크린이나 스마트폰으로 해보세요.
하는 일은 간단하다. 단지 자바스크립트로 position: sticky; 머리에 고정된 값을 만들 뿐이다.(더 좋은 방법이 있으면 알려주세요)

const header = document.querySelector("header"),
  headerStyle = window.getComputedStyle(header),
  headerHeight = parseFloat(headerStyle.height);

let lastPosition = 0;

document.addEventListener("scroll", () => {
  const currentPosition = window.scrollY,
    diff = currentPosition - lastPosition;

  let newTop = parseFloat(headerStyle.top) - diff;
  if (diff < 0) {
    newTop = Math.min(newTop, 0);
  } else {
    newTop = Math.max(newTop, 0 - headerHeight);
  }

  header.style.top = `${newTop}px`;
  lastPosition = currentPosition;
});

현재top에서 이동 거리를 빼고 범위를 초과한 상한과 하한은 새로운top이다.
그림자가 있다면 높이도 고려해야 한다.

newTop = Math.max(newTop, 0 - headerHeight - shadowHeight)

후기

서서히 구르지 않으면 모르죠. 구애받지 않으면 CSS면 충분해요.