Home > Web Front-end > JS Tutorial > body text

jquery+fullpage adds header and copyright in the interface

php中世界最好的语言
Release: 2018-06-15 14:12:52
Original
1344 people have browsed it

This time I will bring you the header and copyright in the jquery fullpage adding interface. What are the precautions for adding the header and copyright in the jquery fullpage interface. The following is a practical case, let's take a look.

Preface

We create a page through the jquery-fullpage plug-in, and the entire page is full-screen scrolling. However, we want to add a copyright to the last page, which is only about 100px high, without requiring a full screen for the copyright. How to do it? I searched and found various methods. Modify the source code, etc., or write your own code to judge. Dizzy. In fact, the official solution has been provided.

Below, let’s briefly talk about how to implement it

In fact, only the html part is needed to implement it

<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>
Copy after login

As above, I won’t talk about the js code. As long as you can run it, there will be no problem. Here you only need to add an fp-auto-height class to the head and bottom.

Isn’t it effective?

Hey, that’s because you only quoted js and not css. Just quote the following css.

In fact, the key code is just the following

.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;
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

How to operate nodejs to encrypt the password

##How to handle the dynamic parameter passing of query in vue-router

The above is the detailed content of jquery+fullpage adds header and copyright in the interface. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template