테스트 사이트 - 개발 중인 베타 버전입니다

fullPage 특정 섹션에서 헤더 안보이게 하는 방법 채택완료

숲을지나 1년 전 조회 1,265

※자동차담보대출사이트입니다. 스팸같은거 아니고 그누보드로 현재 제가 만들고 있는 합법적 사이트예요.

fullPage 반응형으로 만들고 있는 중인데 slide6번 slide7번에서 상단 header 부분과 오른쪽 동그라비 버튼 #fp-nav 이 안보였다가 다시 상단으로 드래그하면 다시 나타나게하는 방법이 있을까요?

 

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
1년 전

http://sir.kr/data/editor/2404/978180634_1713930329.9799.gif" width="100%" />

1. 슬라이드 7번의 경우  fp-auto-height 클래스를 추가해주세요

(위 움짤에 마지막 7번은 짧게 나오는거 보실 수 있습니다)

 

그럼 해당 크기 만큼만 설정 됩니다.

 

2. 헤더와 우측 네비 삭제는 onLeave 혹은 afterLoad를 이용하면 됩니다.

 

예제 코드는 afterLoad 예제입니다. 아래 코드는 질문자님 #header 코드 추가 하였습니다.

 

onLeave 와 afterLoad의 차이점은... 섹션을 출발하는 순간 이냐 ? 다음 섹션을 도착하는 순간이냐? 의 차이입니다.

 

</p>

<p>afterLoad:function(origin, destination){</p>

<p>if(destination === 6 || destination === 7){</p>

<p>          $("#fp-nav").hide();</p>

<p>          $("#header").hide();</p>

<p>        }else{</p>

<p>          $("#fp-nav").show();</p>

<p>          $("#header").show();</p>

<p>        }</p>

<p>}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

숲을지나
1년 전
감사합니다~!!!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인