인프런 커뮤니티 질문&답변

안녕하세요 열혈 수강생 jay k 님:)

우선 nav content의 스크롤 영역보다 위에 위치해 있기 때문에 nav에서는 스크롤이 되지 않는게 맞습니다 😀

nav의 위에서도 스크롤이 가능하게 하고 싶다면 말씀하신것 처럼 컨테이너 안으로 nav를 넣으셔야 하고 그 상태로 고정까지 줘야하는 문제가 생기게 되죠,

네비를 고정시키는 방법은 스무스스크롤바에서 잘 찾으신것 같습니다 ㅎㅎ

하지만 보다 편하게 scrollTrigger를 통해 pin을 주게되면 깔끔하게 고정을 할 수 있습니다.

(marginTop으로 애니메이션을 계속 줄 경우 성능상에 문제가 생길 수 있습니다.)

nav에 스크롤바가 가려지는게 불편하시다면 레이아웃의 크기를 조금 번경하여 커스텀할 수 있습니다.

기존엔 컨테이너 위에 nav를 올렸다면, 이젠 container의 크기를 nav의 크기를 제거한 만큼으로 줄여버려 스크롤의 높이를 작게 가져가면 해당 문제를 해결할 수 있습니다 😀

영상 소리는 제가 11월 부터 2월 말까지 부트캠프 스쿨을 진행하고 있어서 바로 수정은 좀 어려울 것 같습니다..ㅠㅠ

모든 영상의 소리를 키운 후 랜더링을 다시 해야 하기 때문에 시간이 좀 걸릴 것 같습니다 ㅠㅠ..

(원래 모든 피드백은 제일 빠르게 반영하는데 하필 시기가 겹쳐서 죄송합니다🥹)

늘 열심히 하시는 jay k 님을 응원합니다.

감사합니다 :)

다시 써본 코드입니다 😓

도큐먼트 보고 pin에 요소를 넣어 썼는데
다음강의에 나오는 endTrigger로 간단히 해결되네요 !
fixed는 섹션 위로 덮어지지 않아서 css도 조금 수정해 보았습니다!🤔

// ScrollTrigger.create({
//   trigger: '.scroll-content',
//   start: 'top top',
//   end: 'bottom top',
//   pin: nav,
//   pinSpacing: false,
//   markers: true,
// });
ScrollTrigger.create({
  trigger: nav,
  start: 'top top',
  endTrigger: '.scroll-content',
  end: 'bottom bottom',
  pin: true,
  pinSpacing: false,
  markers: true,
});

#container {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.nav {
  /* position: fixed; */
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  z-index: 999;
  background: rgb(235 222 193);
}