fullpage js 관련 채택완료
Suprussy73
1년 전
조회 1,194
안녕하세요
fullpage js 무료버전인 2.9.7을 사용하고 있습니다.
헤더를 상단에 고정시키고 메인에서 fullpage js를 사용중인데 acitve된 section 별로 헤더 내에 클래스를 주고 싶은데 아무리 해봐도 적용이 안되네요...
섹션이 바뀔 때마다 body의 클래스가 바뀌는데 hasClass를 적용해도 되지가 않습니다..
이 플러그인에 맞는 뭔가를 해야할 것 같은데...도움 주실 수 있는 분 계실까요?
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
채택된 답변
+20 포인트
1년 전
</p>
<p><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Fullpage.js 예제</title>
<link rel="stylesheet" href="<a href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css">" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css"></a>
<script src="<a href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js"></script></a>
<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></p>
<p> <script>
new fullpage('#fullpage', {
autoScrolling: true,
navigation: true,
afterLoad: function(origin, destination, direction){
// 헤더에서 활성화된 섹션에 따라 클래스 추가
const header = document.getElementById('header');
// 기존 클래스 제거
header.classList.remove('active');</p>
<p> // 현재 섹션에 따라 클래스 추가
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>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인