특정 섹션에서 헤더의 글꼴색 변경 채택완료
씌내
3년 전
조회 4,589
원래 헤더의 글씨 색상이 하얀색인데
3번째 섹션에서만 글씨를 검은색으로 바꾸고 싶어요 ㅠㅠ
그리고 4번째 섹션에서는 다시 하얀색으로 돌아가게 하고 싶구요..
구글링을 해봐도 안나오는데
어떻게 할 수 있는 방법이 없는걸까요? ㅠㅠㅠㅠㅠㅠ
제이쿼리나 자바스크립트로요..
HTML
</p>
<p><html lang="ko"></p>
<p><head></p>
<p></head></p>
<p><body></p>
<p> <header>헤더</header></p>
<p> <section id=section01>섹션1</section></p>
<p> <section id=section02>섹션2</section></p>
<p> <section id=section03>섹션3</section></p>
<p> <section id=section04>섹션4</section></p>
<p> <footer>푸터</footer></p>
<p></body></p>
<p></html></p>
<p>
CSS
</p>
<p>header {color: #fff; width: 100%; height: 100px; position: fixed; top: 0; left: 0;}</p>
<p>#section01 {width: 100%; height: 100vh; background: red; color: #fff}</p>
<p>#section02 {width: 100%; height: 100vh; background: green; color: #fff}</p>
<p>#section03 {width: 100%; height: 100vh; background: darkblue; color: #fff}</p>
<p>#section04 {width: 100%; height: 100vh; background: orange; color: #fff}</p>
<p>footer {color: #fff; width: 100%; height: 100px; background: black}</p>
<p>
아래는 구글링해서 퍼온 스크롤값으로 헤더에 클래스명을 추가하는 제이쿼리 소스에요
혹시 참고가 되실까 해서요 ㅠㅠ
</p>
<p> $(window).scroll(function(){</p>
<p> var navbar = $(this).scrollTop();</p>
<p> console.log(navbar);</p>
<p> var $header = $('header');</p>
<p> if(navbar > 860){</p>
<p> $header.addClass('activated');</p>
<p> }else{</p>
<p> $header.removeClass('activated');</p>
<p> }</p>
<p> });</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
3년 전
</p>
<p> $(window).scroll(function(){</p>
<p> var sec3Top = $("#section03").offset().top;</p>
<p> var sec3Bottom = sec3Top + $("#section03").height();</p>
<p> if($(this).scrollTop() > sec3Top && $(this).scrollTop() < sec3Bottom){</p>
<p> $('header').addClass("active");</p>
<p> }else{</p>
<p> $('header').removeClass("active");</p>
<p> }</p>
<p> })</p>
<p>//css</p>
<p> header.active{color:#000;}</p>
<p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
씌내
3년 전
우와 이시대의 천재이신거 같아영!!! 감사합니다 >_<♡
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
�
씌내
3년 전
섹션의 글씨색이 아니구 헤더의 글씨색이..ㅠ
댓글을 작성하려면 로그인이 필요합니다.
3년 전
지금 자문자답 하신거죠?
섹션 3번의 시작부분 높이값을 구해서(? 이미 알고 계시겟지만) 그 높이를 지나가면 지금처럼 클래스 넣어주고 다시 4번 시작부분(3번의 끝나는 높이값)에 오면 remove 하면 되겟네여.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
씌내
3년 전
높이가 100vh 반응형이라 창 크기에따라 다르게 나와서 저는 그냥 딱 섹션으로 구분되게 하고 싶어서용 ㅠ
�
내가누구야
3년 전
그것도 역시 마찬가지 아닐까요? 반응형 스크립트 $(window).resize(function () {}); 잡고 움직일때 마다 높이값 체크해서 동일 반응으로 작업하면 가능하실거 같은데요?
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인