목록으로

특정 섹션에서 헤더의 글꼴색 변경 채택완료

씌내

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전 조회 4,765

답변 3

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

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

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

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

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

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

HTML

Copy

<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

Copy

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}

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

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

Copy

$(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개

정렬:

채택된 답변

+20 포인트

삐도리

프로필 보기 이 회원 글보기 이 회원의 댓글보기

4년 전

Copy

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

로그인 후 평가할 수 있습니다