Home  >  Article  >  Web Front-end  >  jquery+fullpage adds header and copyright in the interface

jquery+fullpage adds header and copyright in the interface

php中世界最好的语言
php中世界最好的语言Original
2018-06-15 14:12:521321browse

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>

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;
}

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!

Statement:
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