MIRO 탑바와 검색창의 스크롤 전환 개선

탑바와 검색창이 함께 부드럽게 줄어듭니다. 원래 글 제목이 탑바 뒤로 가려지면 읽는 제목이 작은 줄로 나타납니다.

작업 결과

검색창을 데스크톱에서 310px에서 250px로, 좁은 화면에서 최대 156px로 줄였습니다. 모션 감소 설정에서는 즉시 전환합니다.

변경 내용

적용 내용

사용자는 탑바 축소 애니메이션과 더 작은 검색창, 원래 제목이 사라진 다음에 나타나는 작은 제목을 요청했습니다. 이전에는 탑바 축소와 작은 제목 표시가 동시에 시작됐습니다. 검색창의 너비와 안쪽 여백을 전환하고, 원래 제목의 아래쪽 경계와 탑바 아래쪽 경계를 비교하도록 변경했습니다.

const headingHidden = articleHeading &&
  articleHeading.getBoundingClientRect().bottom <= utility.getBoundingClientRect().bottom;
page.toggleAttribute('data-reading-title', Boolean(scrolled && headingHidden));