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

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

QA

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

답변 3

본문

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

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 하면 되겟네여.

#section03.activated{color:#000;}
답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 1,020
© SIRSOFT
현재 페이지 제일 처음으로