스크롤시 투명한 배경에서 배경색 넣기(feat. 화살표 클릭 시 맨 위로 이동하기)

스크롤시 투명한 배경에서 배경색 넣기

bg에 이미지를 넣어놔서 처음 헤더를 transparent로 설정해줬다.
메인 화면의 내용이 많아질수록 스크롤이 생길텐데 스크롤 하면 헤더에 배경색을 설정해줘서 내용이 겹쳐지는 현상을 방지해야 했다.

✨ 스크롤시 투명한 배경 → 색 넣기

const scrollStyle = {
  base: 'bg-transparent text-black',
  scroll: 'bg-black text-white',
}

export default function Header() {
  const [scrollPosition, setScrollPosition] = useState(0)

  useEffect(() => {
    const handleScroll = () => {
      setScrollPosition(window.scrollY)
    }
    window.addEventListener('scroll', handleScroll)
    return () => {
      window.removeEventListener('scroll', handleScroll)
    }
  }, [])

  const headerScrollValid =
    scrollPosition === 0 ? scrollStyle.base : scrollStyle.scroll

  const goToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

• 스크롤 위치가 0일 때에는 base 스타일을, 아니면 scroll 스타일을 주어 구현했다.
• p태그를 클릭시 goToTop 함수를 줘 맨 위로 이동하도록 구현했다.

goToTop 함수를 생각하다가 맨위로 이동하는 버튼을 만들어 보고싶어졌다.

✨ 화살표 클릭 시 맨 위로 이동하기

export default function ArrowUp() {
  const goToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    })
  }

  return (
    <motion.div
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      onClick={goToTop}
    >
      <img
        src={arrow}
        alt=""
        className="h-12 w-12 rotate-180 cursor-pointer rounded-full border-2 border-black p-1"
      />
    </motion.div>
  )
}

• window.scrollTo를 사용해 클릭시 top 0으로 이동하게 구현했다.

구현 완.