그누보드 QA - 특정 섹션에서 헤더의 글꼴색 변경

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

씌내 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2021.12.28 10:53:35 3889 (49.♡.♡.126)

답변 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');
    }
  });

#javascript #jquery

답변 3

히돌 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2021-12-28 17:06:42 119.♡.♡.62


   $(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;}