react 스크롤 헤더 이벤트 에러
본문
스크롤을 내렸을 때는 header에 배경을 주고싶고 지정한 높이 이상 올라가면 다시 투명색을 주고싶습니다
근데 첫화면 렌더링시에만 투명색이고 다시 올려도 계속 색이 그대로네요ㅜㅜ
깃헙 :
https://github.com/beom-jun-kim/beeflix
// header.tsx
const { scrollY } = useScroll();
// variants
const navVars = {
top: {
backgroundImage: "linear-gradient(180deg,rgba(0,0,0,.7) 10%,transparent)",
},
scroll: {
background: "rgba(0,0,0,1)",
},
};
// scroll 감지
useMotionValueEvent(scrollY, "change", () => {
if (scrollY.get() > 80) {
navAnimation.start("scroll");
} else {
navAnimation.start("top");
}
});
답변 2
src/Components/Header.tsx
const navVars = {
top: {
background: "rgba(0,0,0,0)",
backgroundImage: "linear-gradient(180deg,rgba(0,0,0,.7) 10%,transparent)",
},
scroll: {
background: "rgba(0,0,0,1)",
},
};
감사합니다
다음과 같은 방법도 있으니 참고해 보세요
import { useMotionValue } from 'framer-motion';
const scrollY = useMotionValue(0); // scrollY를 useMotionValue로 선언
// variants
const navVars = {
top: {
background: "rgba(0,0,0,0)", // 초기 배경
},
scroll: {
background: "rgba(0,0,0,1)",
},
};
// scroll 감지
useMotionValueEvent(scrollY, "change", () => {
if (scrollY.get() > 80) {
navAnimation.start("scroll");
} else {
navAnimation.start("top");
}
});
댓글 감사합니다 ! 덕분에 더 공부하고 가네요 :)
답변을 작성하시기 전에 로그인 해주세요.