react 스크롤 헤더 이벤트 에러 채택완료
스크롤을 내렸을 때는 header에 배경을 주고싶고 지정한 높이 이상 올라가면 다시 투명색을 주고싶습니다
근데 첫화면 렌더링시에만 투명색이고 다시 올려도 계속 색이 그대로네요ㅜㅜ
깃헙 :
https://github.com/beom-jun-kim/beeflix
// header.tsx
Copy
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개
채택된 답변
+20 포인트
2년 전
src/Components/Header.tsx
Copy
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)",
},
};
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
2년 전
다음과 같은 방법도 있으니 참고해 보세요
Copy
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");
}
});
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인