스크롤에 따른 메뉴 활성화 애니메이션

1 minute read

2024-07-28

핵심 코드

absolute position

<nav className="sticky top-0">
  <span className="relative">
    {item}
    {activeSectionIdx === idx && (
      <motion.div
        layoutId="nav"
        className={cn([
          'absolute inset-0 rounded-md text-black z-[-1]',
          bgArr[idx],
        ])}
      ></motion.div>
    )}
  </span>
</nav>

부모 요소가 relative 에 자식 요소로 motion 컴포넌트를 absolute 로 하는 것이 요지다.