풀페이지입니다. 세션 이동시 헤더의 글자색을 변경하고싶습니다...

풀페이지입니다. 세션 이동시 헤더의 글자색을 변경하고싶습니다...

QA

풀페이지입니다. 세션 이동시 헤더의 글자색을 변경하고싶습니다...

본문

안녕하세요

오랜만에 방문했습니다. ㅠ

풀페이지가 끼어들면 여전히 헤매고있습니다. ㅠ

 

제목 그대로 

풀페이지 스크롤을 해서 

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>

 

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 81
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT