jquery fullpage 플러그인이 헤더와 테일을 작동하는 방법

이번에는 jqueryfullpage 플러그인이 head와 tail을 작동하는 방법과 jquery fullpage 플러그인이 head와 tail을 작동할 때 어떤 주의사항이 있는지 알려드리겠습니다. 봐.

머리말

jquery-fullpage 플러그인을 통해 페이지가 생성되며 전체 페이지가 전체 화면 스크롤됩니다. 하지만 우리는 저작권을 넣기 위해 전체 화면을 요구하지 않고 높이가 약 100px 정도인 마지막 페이지에 저작권을 추가하고 싶습니다. 어떻게 하나요? 검색해서 다양한 방법을 찾았어요. 소스코드 등을 수정하거나 직접 코드를 작성하여 판단하세요. 어지러운. 실제로 공식적인 솔루션이 제공되었습니다.

이제 구현 방법에 대해 간단히 이야기하겠습니다

실제로 구현에는 html 부분만 필요합니다

<p class="fullpage">
 <p class="section fp-auto-height">这里写头部</p>
 <p class="section">page1</p>
 <p class="section">page2</p>
 <p class="section">page3</p>
 <p class="section">page4</p>
 <p class="section fp-auto-height">这里写版权</p>
</p>

위처럼 js 코드에 대해서는 언급하지 않겠습니다. 문제가 없을 것입니다. 여기서는 머리와 바닥에 fp-auto-height 클래스만 추가하면 됩니다.

효과없나요?

이봐, 그건 CSS가 아닌 js만 quote 인용했기 때문이야. 다음 CSS를 인용해봐.

https://github.com/alvarotrigo/fullPage.js/blob/master/dist/jquery.fullpage.css

사실 키코드는 그냥 다음과 같습니다

.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
 height: auto !important;
}
.fp-responsive .fp-auto-height-responsive.fp-section,
.fp-responsive .fp-auto-height-responsive .fp-slide,
.fp-responsive .fp-auto-height-responsive .fp-tableCell {
 height: auto !important;
}

요약

당신의 문제 이전에 다른 사람들이 문제를 겪었을 수도 있고 누군가가 당신을 위해 문제를 해결했을 것입니다. 검색index엔진을 잘 사용하세요.

전체 페이지 github

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Vue에서 코드 사양 감지를 제거하는 방법 요약

Vue.js+Flask 단일 페이지 APP 케이스 구축에 대한 자세한 설명(코드 포함)

자세한 설명 이미지 캐러셀 구성 요소 튜토리얼의 Vue 구현

위 내용은 jquery fullpage 플러그인이 헤더와 테일을 작동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!