fullpage js 관련
본문
안녕하세요
fullpage js 무료버전인 2.9.7을 사용하고 있습니다.
헤더를 상단에 고정시키고 메인에서 fullpage js를 사용중인데 acitve된 section 별로 헤더 내에 클래스를 주고 싶은데 아무리 해봐도 적용이 안되네요...
섹션이 바뀔 때마다 body의 클래스가 바뀌는데 hasClass를 적용해도 되지가 않습니다..
이 플러그인에 맞는 뭔가를 해야할 것 같은데...도움 주실 수 있는 분 계실까요?
답변 1
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fullpage.js 예제</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>
<style>
header { position: fixed; top: 0; left: 0; width: 100%; background: rgba(255, 255, 255, 0.8); }
.active { color: red; }
</style>
</head>
<body>
<header id="header">
<h1>헤더</h1>
</header>
<div id="fullpage">
<div class="section">첫 번째 섹션</div>
<div class="section">두 번째 섹션</div>
<div class="section">세 번째 섹션</div>
</div>
<script>
new fullpage('#fullpage', {
autoScrolling: true,
navigation: true,
afterLoad: function(origin, destination, direction){
// 헤더에서 활성화된 섹션에 따라 클래스 추가
const header = document.getElementById('header');
// 기존 클래스 제거
header.classList.remove('active');
// 현재 섹션에 따라 클래스 추가
if (destination.index === 0) {
header.classList.add('active'); // 첫 번째 섹션일 때
} else if (destination.index === 1) {
header.classList.add('active'); // 두 번째 섹션일 때
} else if (destination.index === 2) {
header.classList.add('active'); // 세 번째 섹션일 때
}
}
});
</script>
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.