특정 섹션에서 헤더의 글꼴색 변경

특정 섹션에서 헤더의 글꼴색 변경

QA

특정 섹션에서 헤더의 글꼴색 변경

본문

원래 헤더의 글씨 색상이 하얀색인데

3번째 섹션에서만 글씨를 검은색으로 바꾸고 싶어요 ㅠㅠ

그리고 4번째 섹션에서는 다시 하얀색으로 돌아가게 하고 싶구요..

 

구글링을 해봐도 안나오는데

어떻게 할 수 있는 방법이 없는걸까요? ㅠㅠㅠㅠㅠㅠ

 

제이쿼리나 자바스크립트로요..

 

HTML


<html lang="ko">
<head>
</head>
<body>
  <header>헤더</header>
  <section id=section01>섹션1</section>
  <section id=section02>섹션2</section>
  <section id=section03>섹션3</section>
  <section id=section04>섹션4</section>
  <footer>푸터</footer>
</body>
</html>

 

CSS


header {color: #fff; width: 100%; height: 100px; position: fixed; top: 0; left: 0;}
#section01 {width: 100%; height: 100vh; background: red; color: #fff}
#section02 {width: 100%; height: 100vh; background: green; color: #fff}
#section03 {width: 100%; height: 100vh; background: darkblue; color: #fff}
#section04 {width: 100%; height: 100vh; background: orange; color: #fff}
footer {color: #fff; width: 100%; height: 100px; background: black}

 

아래는 구글링해서 퍼온 스크롤값으로 헤더에 클래스명을 추가하는 제이쿼리 소스에요

혹시 참고가 되실까 해서요 ㅠㅠ


  $(window).scroll(function(){
    var navbar = $(this).scrollTop();
    console.log(navbar);
    var $header = $('header');
    if(navbar > 860){
        $header.addClass('activated');
    }else{
        $header.removeClass('activated');
    }
  });

이 질문에 댓글 쓰기 :

답변 3


   $(window).scroll(function(){
       var sec3Top = $("#section03").offset().top;
       var sec3Bottom = sec3Top + $("#section03").height();
       if($(this).scrollTop() > sec3Top && $(this).scrollTop() < sec3Bottom){
           $('header').addClass("active");
        }else{
           $('header').removeClass("active");
       }
   })
//css
    header.active{color:#000;}

지금 자문자답 하신거죠?

 

섹션 3번의 시작부분 높이값을 구해서(? 이미 알고 계시겟지만) 그 높이를 지나가면 지금처럼 클래스 넣어주고 다시 4번 시작부분(3번의 끝나는 높이값)에 오면 remove 하면 되겟네여.

그것도 역시 마찬가지 아닐까요? 반응형 스크립트 $(window).resize(function () {}); 잡고 움직일때 마다 높이값 체크해서 동일 반응으로 작업하면 가능하실거 같은데요?

#section03.activated{color:#000;}
답변을 작성하시기 전에 로그인 해주세요.
전체 2,629
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT