특정 섹션에서 헤더의 글꼴색 변경
본문
원래 헤더의 글씨 색상이 하얀색인데
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 하면 되겟네여.
높이가 100vh 반응형이라 창 크기에따라 다르게 나와서 저는 그냥 딱 섹션으로 구분되게 하고 싶어서용 ㅠ
그것도 역시 마찬가지 아닐까요? 반응형 스크립트 $(window).resize(function () {}); 잡고 움직일때 마다 높이값 체크해서 동일 반응으로 작업하면 가능하실거 같은데요?
#section03.activated{color:#000;}
섹션의 글씨색이 아니구 헤더의 글씨색이..ㅠ
답변을 작성하시기 전에 로그인 해주세요.
