[LAB-19] fixed를 사용해 상단바 고정시 부드럽게 고정되지 못하는 현상

[seohyun0620]

질문 작성자

장서현

문제 상황

첫 번째 사진은 Header컴포넌트 안에 있는 MiniHeader컴포넌트이고 두 번째 사진은 MiniHeader 컴포넌트이며 안에서 일정 스크롤이 발생하면 fixed가 되도록 구현하였고 조건부 렌더링으로 디자인이 변경되며 고정됩니다! 세 번째, 네 번째 사진은 MiniHeader컴포넌트의 css입니다

MiniHeader가 fixed가 되면서 상단에 고정될 때 header하단의 컴포넌트들이 원래 MiniHeader영역만큼 위로 올라가서 부드럽게 고정되지 못하고 끊기는 느낌이 드는데 해결 방법이 있을까요??..실제 컬리 웹에서는 부드럽게 고정되는데 제가 구현한 것은 끊기는 느낌을 받아 질문드립니다 감사합니다

프로젝트 저장소 URL

https://github.com/Bob-Lion/React-Web-Market

환경 정보

윈도우 입니다.

[yamoo9]

문제 해결

아래 문제가 해결된 영상을 확인하세요.

수정한 파일

수정한 파일은 3개이며, 구현 과정을 하나 하나 설명하려면 길어질 듯 하여 파일을 첨부합니다. Header.zip 파일을 다운로드 받아 분석해 적용해보세요. 😊

• Header.module.scss
• MiniHeader.jsx
• HeaderNav.jsx

[seohyun0620]

정말 정말 감사합니다 야무쌤!!!ㅠㅠㅠㅠ지금 당장 분석해보겠습니다!!