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