[2022.07.18] 해당 영역 스크롤시 왼쪽 메뉴 글씨 색 변경 설정(1)

오류: 스크롤이 되다가 해당 위치에 도달시 왼쪽 title 컬러가 변경되게 효과를 넣고 싶었으나 어려움을 겪음...계속해서 구글링하고 youtube보면서 방법을 찾으려고 했으나 오류가 남

 

observer

로 처음 시도를 해보았으나, 다른 파일에서는 여기 코드 스타일대로 진행시 되었지만, 실제 작업 파일에 적용하려 하자 에러가 남

 

addEventListener

이 방식도 시도했으나 오류

 

최종적으로

addEventListener를 다시 구성해서 코드를 작성하여 성공

 

최종적 참고 사이트

https://iancoding.tistory.com/224

[React] 리액트 헤더 스크롤 시 CSS 변경

 

▼ 해결 코드

const [scrollPosition, setScrollPosition] = useState(0);
  const updateScroll = () => {
    setScrollPosition(window.scrollY || document.documentElement.scrollTop);
  }
  useEffect(()=>{
    window.addEventListener('scroll', updateScroll);
    return () => {
      window.removeEventListener('scroll', updateScroll);
    };
  },[]);
  
  ...
  
  <ul className="ztHisTitle" data-aos="fade-up"  data-aos-duration="2500">
    <li className='ztHisTitleOr' data-aos="fade-up"  data-aos-duration="2000">제타플랜의 시작으로<br/> 한국 기업 컨설팅의</li>
    <li onClick={() => handleClick(0)}  className={0<=scrollPosition&&scrollPosition<=3393 ? 'ztHisTitleLiOn':'ztHisTitleLi'}>미래를 시작하다.</li>
    <li onClick={() => handleClick(1)}
      className={3393<scrollPosition&&scrollPosition<=6500 ?  'ztHisTitleLiOn':'ztHisTitleLi'}>뿌리를 통해 성장하다.</li>
    <li onClick={() => handleClick(2)}  className={6500<scrollPosition&&scrollPosition<=9600 ?  'ztHisTitleLiOn':'ztHisTitleLi'}>무한발전을 하다.</li>
    <li onClick={() => handleClick(3)}  className={9600<scrollPosition&&scrollPosition?  'ztHisTitleLiOn':'ztHisTitleLi'}>기반을 다지다.</li>
  </ul>
  ...