풀페이지 소스 - 네비게이션 버튼 수정

풀페이지 소스 - 네비게이션 버튼 수정

QA

풀페이지 소스 - 네비게이션 버튼 수정

답변 2

본문

풀페이지 소스

 

현재 위의 풀페이지 소스를 활용해서 작업을 진행하고 있습니다.

근데 네비게이션 디자인을 각 섹션마다 색상을 바꿔주고 싶은데,

어떻게 클래스를 추가해서 컨트롤을 할 수 있는지 모르겠습니다.

 

예를들어 첫번째 섹션에서는 네비게이션이 블랙이면, 2번째 섹션에서는 화이트로 가고 싶습니다.

 

어떻게 자바스크립트를 작성해야 가능할까요?

이 질문에 댓글 쓰기 :

답변 2

//풀페이지 옵션에  afterLoad를 넣으셔서 하시면 됩니다.
new fullpage('#fullpage', 
    {

        afterLoad: function(origin, destination, direction){
            jQuery("#infoMenu"),removeAttr('class').attr('class', ''); 
            jQuery("#infoMenu").addClass("infoMenu"+origin.index);  //해당 섹션 index 0  부터
        }
});

css 로 내용을 정의해 놓으시면 됩니다.
<style>
#infoMenu.infoMenu0{}
#infoMenu.infoMenu1{}
...
</style>
 

afterLoad: function(origin){
                if(origin.anchor == 'one'){
                    jQuery("#fp-nav").addClass("nav_green");
                }
            }


이렇게 응용했어용 ㅋㅋ 고맙습니다.

onLeave: function(origin, destination, direction){
                /* onLeave는 해당 섹션을 떠나는 도중에 실행. afterLoad는 떠나고 나서 실행. */
                /*지정한 앵커명에 따라서 클래스를 추가. 특정 섹션마다 디자인 변경 가능*/
                if(origin.anchor == 'one'){ /* 앵커 one을 떠나는 도중에 클래스를 추가하라. */
                    $("#fp-nav").addClass("nav_green");
                } else if(destination.index == 0) { /* 목적지가 인덱스 0인 경우 클래스를 지워라 */
                    $("#fp-nav").removeClass("nav_green");
                }
            }

이렇게 다시 수정!

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 50
© SIRSOFT
현재 페이지 제일 처음으로