풀페이지입니다. 세션 이동시 헤더의 글자색을 변경하고싶습니다...
본문
안녕하세요
오랜만에 방문했습니다. ㅠ
풀페이지가 끼어들면 여전히 헤매고있습니다. ㅠ
제목 그대로
풀페이지 스크롤을 해서
section2로 이동하게되면
헤더의 글자색을 변경하고싶습니다.
혹시 어떻게 하면 해결할 수 있을까요...?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>연습</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./js/fullpage/fullpage.min.css">
<link rel="stylesheet" href="./css/main.css">
<script type="text/javascript" src="./js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="./js/fullpage/fullpage.min.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!-- 헤더 -->
<header id="header">
<div class="inner">
<h1><img src="./img/logo_w.png" alt=""></h1>
<nav>
<ul>
<li><a href="">리프팅클리닉</a></li>
<li><a href="">홈페이지</a></li>
<li><a href="">온라인상담</a></li>
<li><a href="">온라인예약</a></li>
</ul>
</nav>
<a href="" class="tel"><img src="./img/tel_icon.png" alt=""><span>033</span>. 000. 0000</a>
</div>
</header>
<!-- 풀페이지 콘텐츠 -->
<div class="wrap" id="fullpage">
<section class="section section1">1</section>
<section class="section section2">2</section>
<section class="section section3">3</section>
<section class="section section4">4</section>
</div>
<script>
$(document).ready(function() {
// 풀페이지 초기화
$('#fullpage').fullpage({
onLeave: function(index, nextIndex, direction) {
// 페이지 이동 시 헤더 스타일 변경
var headerNav = $('#header .inner nav ul li a');
if (nextIndex === 2) {
headerNav.find('a').css('color', '#333'); // section2로 이동할 때 헤더 글자색 변경
} else {
headerNav.find('a').css('color', ''); // 다른 섹션으로 이동할 때 원래 헤더 글자색으로 복원
}
}
});
});
</script>
</body>
</html>
답변 2
스크롤 매직 스크립트를 활용해 보세요.
안녕하세요! 한번 해보겠습니다!
headerNav.find('a').css('color', '#333');
->
headerNav.css('color', '#333');
안녕하세요! 댓글감사합니다!
이렇게 바꿔서는 안되네요 ㅠㅠㅠㅠ
